自定义 App

Next.js 使用App组件来初始化页面。您可以覆盖它并控制页面初始化以及

在页面更改之间创建共享布局
将其他数据注入页面
添加全局 CSS

用法

要覆盖默认的App，请创建如下所示的文件pages/_app

pages/_app.tsx

import type { AppProps } from 'next/app'
 
export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

Component 属性是活动page，因此无论何时您在路由之间导航，Component 都会更改为新的page。因此，您发送给Component的任何 props 都将被page接收。

pageProps 是一个对象，其中包含通过我们的数据获取方法之一预加载到页面的初始 props，否则它是一个空对象。

须知:

如果您的应用程序正在运行并且您添加了自定义App，则需要重新启动开发服务器。仅当之前不存在pages/_app.js时才需要。

App 不支持 Next.js 的数据获取方法，例如getStaticProps 或getServerSideProps。

带有`App`的`getInitialProps`

在App中使用getInitialProps 将禁用没有getStaticProps的页面的自动静态优化。

我们不建议使用此模式。 相反，请考虑逐步采用 App Router，它允许您更轻松地为页面和布局获取数据。

pages/_app.tsx

import App, { AppContext, AppInitialProps, AppProps } from 'next/app'
 
type AppOwnProps = { example: string }
 
export default function MyApp({
  Component,
  pageProps,
  example,
}: AppProps & AppOwnProps) {
  return (
    <>
      <p>Data: {example}</p>
      <Component {...pageProps} />
    </>
  )
}
 
MyApp.getInitialProps = async (
  context: AppContext
): Promise<AppOwnProps & AppInitialProps> => {
  const ctx = await App.getInitialProps(context)
 
  return { ...ctx, example: 'data' }
}

自定义 App

用法

带有App的getInitialProps

带有`App`的`getInitialProps`