自定义 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 的 数据获取方法 ，例如 getStaticProps 或 getServerSideProps 。

TypeScript

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

相关内容

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

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