🚀

【Next.js和訳】Advanced Features/Custom `App`

2021/10/02に公開約2,400字

この記事について

この記事は、Advanced Features/Custom Appの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Custom App

Next.js では、ページの初期化にAppコンポーネントを使用しています。

このコンポーネントをオーバーライドして、ページの初期化をコントロールすることができます。

これにより、以下のような素晴らしいことが可能になります。

  • ページを変更してもレイアウトを保持する
  • ページを移動する際の状態保持
  • componentDidCatchを使ったカスタムエラー処理
  • ページへの追加データの注入
  • グローバル CSS の追加

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

./pages/_app.js
// import App from 'next/app'
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
// このメソッドをアンコメントするのは、アプリケーション内のすべてのページでブロック化されたデータが必要な場合のみです。
// これにより、自動静的最適化の機能が無効になり、アプリ内のすべてのページがサーバーサイドでレンダリングされることになります。
//
// MyApp.getInitialProps = async (appContext) => {
//   // ページの `getInitialProps` を呼び出し、`appProps.pageProps` を埋めます。
//   const appProps = await App.getInitialProps(appContext);
//
//   return { ...appProps }
// }
export default MyApp

Componentのプロップスはアクティブなpageであるため、ルート間を移動するたびに、Componentは新しいpageに変わります。

そのため、Componentに送ったプロップスは、pageが受け取ることになります。

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

注意点 | Caveats

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

  • AppでカスタムのgetInitialPropsを追加すると、静的生成のないページでは自動静的最適化が無効になります。

  • カスタムアプリで getInitialProps を追加する際には、import App from "next/app" とし、getInitialProps 内で App.getInitialProps(appContext) を呼び出し、返されたオブジェクトを戻り値にマージする必要があります。

  • Appは現在、getStaticPropsgetServerSidePropsのようなNext.js の Data Fetching メソッドをサポートしていません。

TypeScript | TypeScript

TypeScript をお使いの方は、TypeScript のドキュメントをご覧ください。

次に何をすべきかについては、以下のセクションをお勧めします。

https://nextjs.org/docs/advanced-features/automatic-static-optimization

https://nextjs.org/docs/advanced-features/custom-error-page

Discussion

ログインするとコメントできます