カスタムApp

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

ページ変更間で共有レイアウトを作成
ページに追加データを注入
グローバルCSSを追加

使用方法

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

pages/_app.tsx

import type { AppProps } from 'next/app'
 
export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

Component propsはアクティブなpageであり、ルート間を移動するたびにComponentは新しいpageに変わります。したがって、Componentに送信するすべてのpropsはpageによって受け取られます。

pagePropsは、当社のデータフェッチメソッドのいずれかによってページのためにプリロードされた初期propsを持つオブジェクトです。それ以外の場合は空のオブジェクトです。

知っておくと良いこと:

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

Appは、Next.jsのデータフェッチメソッドであるgetStaticPropsやgetServerSidePropsをサポートしていません。

Appでの`getInitialProps`

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

このパターンを使用することはお勧めしません。代わりに、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' }
}

この情報は役に立ちましたか？

カスタムApp

使用方法

AppでのgetInitialProps

Appでの`getInitialProps`