【Next.js和訳】Advanced Features/Custom `App`
この記事について
この記事は、Advanced Features/Custom Appの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Custom App
Next.js では、ページの初期化にAppコンポーネントを使用しています。
このコンポーネントをオーバーライドして、ページの初期化をコントロールすることができます。
これにより、以下のような素晴らしいことが可能になります。
- ページを変更してもレイアウトを保持する
- ページを移動する際の状態保持
-
componentDidCatchを使ったカスタムエラー処理 - ページへの追加データの注入
- グローバル CSS の追加
デフォルトの App をオーバーライドするには、以下のように ./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が以前に存在しなかった場合にのみ必要です。 -
カスタムアプリで
getInitialPropsを追加する際には、import App from "next/app"とし、getInitialProps内でApp.getInitialProps(appContext)を呼び出し、返されたオブジェクトを戻り値にマージする必要があります。 -
Appは現在、getStaticPropsやgetServerSidePropsのようなNext.js の Data Fetching メソッドをサポートしていません。
TypeScript | TypeScript
TypeScript をお使いの方は、TypeScript のドキュメントをご覧ください。
関連 | Related
次に何をすべきかについては、以下のセクションをお勧めします。
Discussion