カスタム 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が無効になります。
• カスタム App で getInitialProps を追加する場合、import App from "next/app" を行い getInitialProps の中で App.getInitialProps(appContext) を実行して返されたオブジェクトを getInitialProps が返すオブジェクトへとマージする必要があります。
• App コンポーネントは現在 getStaticProps や getServerSideProps といった Next.js のデータ取得メソッド をサポートしていません。

TypeScript

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

関連事項

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