Next.js高级特性：自定义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 不支持 Next.js 的 数据获取方法，例如 getStaticProps 或 getServerSideProps。

TypeScript

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