カスタム App コンポーネント

Next.js はページの初期化に App コンポーネントを使用します。このコンポーネントをオーバーライドすることで、ページ初期化を制御し、以下のことが可能になります:

ページ遷移間で共有されるレイアウトの作成
ページに追加データを注入
グローバル CSS の追加

使用方法

デフォルトの App をオーバーライドするには、以下のように pages/_app ファイルを作成します:

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 で受け取られます。

pageProps は、データフェッチ方法のいずれかであらかじめ読み込まれた初期プロパティを持つオブジェクトです。それ以外の場合は空のオブジェクトになります。

知っておくと便利

アプリが実行中にカスタム App を追加した場合、開発サーバーを再起動する必要があります。これは以前に pages/_app.js が存在しなかった場合にのみ必要です。

App は getStaticProps や getServerSideProps などの Next.js のデータフェッチ方法をサポートしていません。

`App` での `getInitialProps` の使用

App で getInitialProps を使用すると、getStaticProps を持たないページの自動静的最適化 (Automatic Static Optimization) が無効になります。

このパターンの使用は推奨しません。 代わりに、ページとレイアウトのデータをより簡単に取得できる App Router への段階的な移行を検討してください。

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

カスタム App コンポーネント

使用方法

App での getInitialProps の使用

On this page

`App` での `getInitialProps` の使用