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 文档。
作者:terry,如若转载,请注明出处:https://www.web176.com/nextjs/2426.html