自定义应用

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

¥Next.js uses the App component to initialize pages. You can override it and control the page initialization and:

在页面更改之间创建共享布局

¥Create a shared layout between page changes
将附加数据注入页面

¥Inject additional data into pages
添加全局 CSS

¥Add global CSS

用法

¥Usage

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

¥To override the default App, create the file pages/_app as shown below:

import type { AppProps } from 'next/app'

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

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

¥The Component prop is the active page, so whenever you navigate between routes, Component will change to the new page. Therefore, any props you send to Component will be received by the page.

pageProps 是一个带有初始 props 的对象，由我们的数据获取方法之一为你的页面预加载，否则它是一个空对象。

¥pageProps is an object with the initial props that were preloaded for your page by one of our data fetching methods, otherwise it's an empty object.

很高兴知道

¥Good to know

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

¥If your app is running and you added a custom App, you'll need to restart the development server. Only required if pages/_app.js didn't exist before.

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

¥App does not support Next.js Data Fetching methods like getStaticProps or getServerSideProps.

`getInitialProps` 与 `App`

¥getInitialProps with App

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

¥Using getInitialProps in App will disable Automatic Static Optimization for pages without getStaticProps.

我们不建议使用此模式。相反，请将逐步采用视为应用路由，它允许你更轻松地获取页面和布局的数据。

¥We do not recommend using this pattern. Instead, consider incrementally adopting the App Router, which allows you to more easily fetch data for pages and layouts.

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

import App from 'next/app'

export default function MyApp({ Component, pageProps, example }) {
  return (
    <>
      <p>Data: {example}</p>
      <Component {...pageProps} />
    </>
  )
}

MyApp.getInitialProps = async (context) => {
  const ctx = await App.getInitialProps(context)

  return { ...ctx, example: 'data' }
}

用法​

getInitialProps 与 App​

用法

`getInitialProps` 与 `App`