︙

Custom App

Next.js は、ページを初期化するためにApp component を使用します。それを上書きして、ページの初期化と：

ページ変更間で共有の layout を作成する
ページに追加データを注入する
グローバル CSS を追加する

Usage

Appの default をオーバーライドするには、以下に示すようにpages/_appというファイルを作成してください：

pages/_app.tsx

import type { AppProps } from 'next/app'

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

pages/_app.jsx

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

Componentプロップはアクティブなpageで、routes 間を移動するたびに、Componentは新しいpageに変わります。したがって、Componentに送信した props はすべてpageが受け取ります。

pagePropsは、私たちのデータ取得 Methodのいずれかによってページのために事前にロードされた初期の props を含む empty object です。それ以外の場合は、空の object です。

Good to know

あなたの app が稼働していて、カスタムAppを追加した場合、 development server を再起動する必要があります。pages/_app.jsが以前に存在しなかった場合にのみ必要です。

Appは、Next.js のデータ取得方法、 getStaticProps や getServerSideProps などをサポートしていません。

`getInitialProps` with `App`

getInitialPropsをAppで使うと、getStaticPropsがないページについてのAutomatic Static Optimizationが無効になります。

**このパターンの使用はお勧めしません。**代わりに、徐々に採用することを検討してみてください。 App Router 。これにより、ページとレイアウトのデータをもっと簡単に fetch できます。

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

pages/_app.jsx

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

Usage

getInitialProps with App

`getInitialProps` with `App`