自定义 App

Next.js 使用 App 组件来初始化页面。你可以覆盖该 App 组件并控制页面的初始化。这让你可以做一些“很吓人”的事情,例如:

  • 页面切换之间保持布局的持久化
  • 切换页面时保持状态(state)
  • 使用 componentDidCatch 自定义错误处理
  • 向页面(pages)注入额外的数据
  • 添加全局 CSS

要覆盖默认的 App,首先创建 ./pages/_app.js 文件,如下:

// import App from 'next/app'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

// Only uncomment this method if you have blocking data requirements for
// every single page in your application. This disables the ability to
// perform automatic static optimization, causing every page in your app to
// be server-side rendered.
//
// MyApp.getInitialProps = async (appContext) => {
//   // calls page's `getInitialProps` and fills `appProps.pageProps`
//   const appProps = await App.getInitialProps(appContext);
//
//   return { ...appProps }
// }

export default MyApp

Component 属性即当前 page,因此,每当你在路由之间切换时,Component 都会更新为新的 page。因此,你传递给 Component 的任何属性都将会被 page 接收到。

pageProps 是带有初始属性的对象,该初始属性由我们的某个 数据获取方法 预先加载到你的页面中,否则它将是一个空对象。

注意事项

  • 如果你对 App 组件进行了自定义时你的应用程序正在运行中,那么你需要重新启动开发服务器才能使修改生效。仅当 pages/_app.js 不存在时才需要重启开发服务器。
  • App 中添加自定义的 getInitialProps 时将导致不支持 静态生成 的页面禁止 自动静态优化功能
  • 在自定义的 App 中添加 getInitialProps 时,必须添加 import App from "next/app" 语句、 在 getInitialProps 内部调用 App.getInitialProps(appContext) 以及将返回的对象合并到返回值中。
  • 目前,App 不支持 Next.js 的 数据获取方法,例如 getStaticPropsgetServerSideProps

TypeScript

如果你使用的是 TypeScript,请查看 我们的 TypeScript 文档

相关内容

以下是我们建议接下来需要学习的内容: