Sponsor
ChatHubChatHub Use GPT-4, Gemini, Claude 3.5 and more chatbots side-by-side
ここをクリック
Menu

カスタムApp

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

使用方法

デフォルトの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は、データフェッチング方法の1つによってページ用にプリロードされた初期プロップのオブジェクトで、それ以外の場合は空のオブジェクトです。

補足

  • アプリが実行中にカスタムAppを追加した場合、開発サーバーを再起動する必要があります。pages/_app.jsが以前に存在しなかった場合にのみ必要です。
  • Appは、getStaticPropsgetServerSidePropsなどのNext.jsのデータフェッチング方法をサポートしていません。

AppでのgetInitialProps

AppgetInitialPropsを使用すると、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: 'data' }
}