カスタムApp
Next.jsはApp
コンポーネントを使用してページを初期化します。これをオーバーライドすることで、ページの初期化を制御し、以下のことができます:
- ページ遷移間の共有レイアウトを作成
- ページに追加のデータを注入
- グローバルCSSを追加
使用方法
デフォルトのApp
をオーバーライドするには、以下のようにpages/_app
ファイルを作成します:
pages/_app.tsx
TypeScript
import type { AppProps } from 'next/app'
export default function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
Component
プロップは現在のアクティブなpage
であり、ルート間を移動するたびにComponent
は新しいpage
に変更されます。したがって、Component
に送信するすべてのプロップは、page
によって受け取られます。
pageProps
は、データフェッチング方法の1つによってページ用にプリロードされた初期プロップのオブジェクトで、それ以外の場合は空のオブジェクトです。
補足:
- アプリが実行中にカスタム
App
を追加した場合、開発サーバーを再起動する必要があります。pages/_app.js
が以前に存在しなかった場合にのみ必要です。App
は、getStaticProps
やgetServerSideProps
などのNext.jsのデータフェッチング方法をサポートしていません。
App
でのgetInitialProps
App
でgetInitialProps
を使用すると、getStaticProps
のないページに対して自動静的最適化が無効になります。
このパターンは推奨しません。 代わりに、App Routerへの段階的な移行を検討してください。これにより、ページとレイアウトのデータをより簡単にフェッチできます。
pages/_app.tsx
TypeScript
import App, { AppContext, AppInitialProps, AppProps } from 'next/app'
type AppOwnProps = { example: string }
export default function MyApp({
Component,
pageProps,
example,
}: AppProps & AppOwnProps) {
return (
<>
<p>データ: {example}</p>
<Component {...pageProps} />
</>
)
}
MyApp.getInitialProps = async (
context: AppContext
): Promise<AppOwnProps & AppInitialProps> => {
const ctx = await App.getInitialProps(context)
return { ...ctx, example: 'data' }
}