1 安装 npx create-next-app
2 _app.js _document.js server.js
3 css 这使用了一个名为styled-jsx的库。这是一个“ CSS-in-JS”库-它使您可以在React组件中编写CSS，并且CSS样式将受到限制（其他组件不会受到影响）。
==Next.js内置了对styled-jsx的支持，但是您也可以使用其他流行的CSS-in-JS库，例如styled-components或情感。
==Next.js具有对CSS和Sass的内置支持，可让您导入.css和.scss文件。
==还支持使用流行的CSS库，例如Tailwind CSS。
==要使用CSS模块，CSS文件名必须以结尾.module.css
==要加载全局CSS文件，请创建一个名为_app.js under 的文件
4 _app.js
该App组件是顶级组件，将在所有不同页面上通用。App例如，在页面之间导航时，可以使用此组件来保持状态
5自定义PostCSS配置
开箱即用，无需配置，Next.js使用PostCSS编译CSS 。
6 搭配material ui
如果不配置，会对样式有影响
我们很清楚这个问题。我们最近引入了SSR API，它创建了更多的约束，更易于使用，并且应该减少出现此类问题的可能性。
虽然您必须在v3中配置_document.js和_app.js，但使用v4配置_document.js就足够了。
参考https://github.com/mui-org/material-ui/blob/v3.x/examples/nextjs/pages/_document.js
https://itnext.io/next-js-with-material-ui-7a7f6485f671
__document.js
/* eslint-disable react/jsx-filename-extension */
import React from 'react';
import Document, {
Html, Main, NextScript,
} from 'next/document';
import { ServerStyleSheets } from '@material-ui/core/styles';
export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with server-side generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
// Render app and page and get the context of the page with collected side effects.
const sheets = new ServerStyleSheets();
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () => originalRenderPage({
enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
// Styles fragment is rendered after the app and page rendering finish.
styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
};
};
_app.js
React.useEffect(() => {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles) {
jssStyles.parentElement.removeChild(jssStyles);
}
}, []);
要自定义PostCSS配置，您可以创建一个名为的顶级文件postcss.config.js。如果您正在使用Tailwind CSS之类的库，这将很有用。
7 获取数据
node-fetch
8 国际化
（1）报错
You have not declared a namespacesRequired array on your page-level component: withI18nextTranslation(Home). This will cause all namespaces to be sent down to the client,
possibly negatively impacting the performance of your app. For more info,
see: https://github.com/isaachinman/next-i18next#4-declaring-namespace-dependencies
（1）解决
Custom404.getInitialProps = async () => ({
namespacesRequired: ['common'],
})
（2）版本6.02开始 无服务器
设置 _app.js
// import React, { useEffect } from 'react';
// import '../styles/global.css'
// import { appWithTranslation } from '../i18n'
// function App({ Component, pageProps }) {
// useEffect(() => {
// const jssStyles = document.querySelector('#jss-server-side');
// if (jssStyles) {
// jssStyles.parentElement.removeChild(jssStyles);
// }
// }, []);
// return <Component {...pageProps} />
// }
// export default appWithTranslation(App)
import App from 'next/app'
import React, { useEffect } from 'react';
import { appWithTranslation } from '../i18n'
const MyApp = ({ Component, pageProps }) => {
useEffect(() => {
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles) {
jssStyles.parentElement.removeChild(jssStyles);
}
}, []);
return <Component {...pageProps} />
}
MyApp.getInitialProps = async (appContext) => ({ ...await App.getInitialProps(appContext) })
export default appWithTranslation(MyApp)
(2)设置next.config.js
const { nextI18NextRewrites } = require('next-i18next/rewrites')
const localeSubpaths = {}
module.exports = {
rewrites: async () => nextI18NextRewrites(localeSubpaths),
publicRuntimeConfig: {
localeSubpaths,
},
}
(2)i18n.js
const i18n = require('i18next')
const NextI18Next = require('next-i18next').default
const detector = require('i18next-browser-languagedetector')
const { localeSubpaths } = require('next/config').default().publicRuntimeConfig
const path = require('path')
module.exports = new NextI18Next({
defaultLanguage: 'en',
otherLanguages: ['de'],
fallbackLng: "en",
browserLanguageDetection: true,
localePath: path.resolve('./public/static/locales')
})
(3)设置_error.js
import PropTypes from 'prop-types'
import { withTranslation } from '../i18n'
const Error = ({ statusCode, t }) => (
<p>
{statusCode
? t('error-with-status', { statusCode })
: t('error-without-status')}
</p>
)
Error.getInitialProps = async ({ res, err }) => {
let statusCode = null
if (res) {
({ statusCode } = res)
} else if (err) {
({ statusCode } = err)
}
return {
namespacesRequired: ['common'],
statusCode,
}
}
Error.defaultProps = {
statusCode: null,
}
Error.propTypes = {
statusCode: PropTypes.number,
t: PropTypes.func.isRequired,
}
export default withTranslation('common')(Error)
(3)设置404.js
(4)pages/404` can not have getInitialProps/getServerSideProps,
function Custom404() {
return <h1>404 - Page Not Found</h1>
}
Custom404.getInitialProps = async () => ({
namespacesRequired: ['common'],
})
export default Custom404
网友评论