# 自定义 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 文档

# 相关内容

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

自动静态优化:Next.js 会尽可能地自动优化你的应用程序并输出静态 HTML。在本章节中了解其工作原理。 自定义错误页面:了解有关内置错误页面的更多信息。

Last Updated: 5/13/2023, 8:55:38 PM