コンテンツにスキップ
アプリケーションの構築ルーティングカスタム App

カスタム App

Next.js は、App コンポーネントを使用してページを初期化します。これをオーバーライドして、ページの初期化と

使用方法

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

pages/_app.tsx
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 は、getStaticProps や getServerSideProps などの Next.js データフェッチメソッド をサポートしていません。

App での getInitialProps

App で getInitialProps を使用すると、getStaticProps がないページでは 自動静的最適化 が無効になります。

このパターンの使用は推奨しません。 代わりに、App Router を段階的に採用することを検討してください。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' }
}