カスタム App

Next.js は App コンポーネントを使ってページの初期化を行います。App コンポーネントを上書きして、ページ初期化の制御を行えます。これによって次のようなことが実現できます:

  • ページが変化する間でレイアウトを保持する
  • ページ遷移時に state を保持する
  • componentDidCatch を使って独自のエラーハンドリングを行う
  • ページに追加の情報を注入する
  • グローバルCSSを追加する

標準の App を上書きするには、次に示すような ./pages/_app.js を作成します:

// import App from 'next/app'

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

// もし、アプリケーション内のすべてのページでブロックするデータを必要とする場合のみ、このメソッドのコメントを外してください。
// Automatic Static Optimizationを無効にし、アプリケーション内の各ページはサーバーサイドでレンダリングされます。
//
// MyApp.getInitialProps = async (appContext) => {
//   // ページの`getInitialProps`を呼び、`appProps.pageProps`を満たします。
//   const appProps = await App.getInitialProps(appContext);
//
//   return { ...appProps }
// }

export default MyApp;
  • Component prop はアクティブな page です。なので、ルート間で遷移するたびに Component は新しい page に変化します。そのため、Componentに渡した prop はすべてその page で受け取ることができます。

  • pagePropsデータ取得メソッドの 1 つによってプリロードされた初期 props を持つオブジェクトです。そうでなければ空のオブジェクトになります。

注意事項

  • もしアプリが起動していて、独自の App を追加しただけの場合は、開発サーバーを再起動する必要があります。もし、pages/_app.jsが存在しなかったときのみ必要です。
  • あなたの App で独自の getInitialProps を追加した場合、Static Generationを行わないページでAutomatic Static Optimizationが無効になります。

TypeScript

もし TypeScript を利用する場合は、TypeScriptのドキュメントをご覧ください。

関連事項

次にやるべきこととして、以下のセクションをお勧めします: