自定义 App

Next.js 使用 App 组件来初始化页面。你可以重写它并控制页面初始化，并且可以：

在页面变化间创建共享布局
向页面注入额外数据
添加全局 CSS

使用方法

要重写默认的 App，请按照下面的方式创建 pages/_app 文件：

pages/_app.tsx

TypeScript

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

Component 属性是活动的 page，每当你在路由间导航时，Component 将变更为新的 page。因此，你发送给 Component 的任何属性都将被 page 接收。

pageProps 是一个对象，包含通过我们的数据获取方法为你的页面预加载的初始属性，否则为空对象。

值得注意的是：

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

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

在 `App` 中使用 `getInitialProps`

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

**我们不推荐使用这种模式。**相反，考虑渐进式采用 App Router，它允许你更轻松地为页面和布局获取数据。

pages/_app.tsx

TypeScript

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

自定义 App

使用方法

在 App 中使用 getInitialProps

在 `App` 中使用 `getInitialProps`