跳到内容
构建你的应用路由自定义 App

自定义 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 prop 是当前激活的 page，因此每当你在路由之间导航时，Component 将更改为新的 page。因此，你发送给 Component 的任何 props 都将被 page 接收。

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

须知:

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' }
}