1 安裝 npx create-next-app
2 _app.js _document.js server.js
3 css 這使用了一個(gè)名為styled-jsx的庫(kù)。這是一個(gè)“ CSS-in-JS”庫(kù)-它使您可以在React組件中編寫CSS，并且CSS樣式將受到限制（其他組件不會(huì)受到影響）。
==Next.js內(nèi)置了對(duì)styled-jsx的支持，但是您也可以使用其他流行的CSS-in-JS庫(kù)踊东，例如styled-components或情感。
==Next.js具有對(duì)CSS和Sass的內(nèi)置支持，可讓您導(dǎo)入.css和.scss文件呻粹。
==還支持使用流行的CSS庫(kù)，例如Tailwind CSS苏研。
==要使用CSS模塊等浊，CSS文件名必須以結(jié)尾.module.css
==要加載全局CSS文件，請(qǐng)創(chuàng)建一個(gè)名為_app.js under 的文件
4 _app.js
該App組件是頂級(jí)組件摹蘑，將在所有不同頁面上通用筹燕。App例如，在頁面之間導(dǎo)航時(shí)衅鹿，可以使用此組件來保持狀態(tài)
5自定義PostCSS配置
開箱即用撒踪，無需配置，Next.js使用PostCSS編譯CSS 大渤。
6 搭配material ui
如果不配置制妄，會(huì)對(duì)樣式有影響
我們很清楚這個(gè)問題。我們最近引入了SSR API泵三，它創(chuàng)建了更多的約束耕捞，更易于使用，并且應(yīng)該減少出現(xiàn)此類問題的可能性切黔。
雖然您必須在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配置纬霞，您可以創(chuàng)建一個(gè)名為的頂級(jí)文件postcss.config.js凌埂。如果您正在使用Tailwind CSS之類的庫(kù)，這將很有用诗芜。
7 獲取數(shù)據(jù)
node-fetch
8 國(guó)際化
（1）報(bào)錯(cuò)
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開始 無服務(wù)器
設(shè)置 _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)設(shè)置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)設(shè)置_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)設(shè)置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
