Zenn
Open3

Custom App

あおけんあおけん

Next.jsはAppコンポーネントを使ってページを初期化する。
このコンポーネントをオーバーライドして、
ページの初期化をコントロールすることができる

  • ページ変更時に共有レイアウトを作成する
  • ページに追加データを注入する
  • グローバルCSSを追加する
あおけんあおけん

Usage

デフォルトのAppを上書きするには、以下のようにpages/_appファイルを作成する。

// pages/_app.tsx
import type { AppProps } from 'next/app'
 
export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

Component propはアクティブなページなので、
ルート間を移動するときはいつでも、Componentは新しいページに変わる。
したがって、Componentに送信したpropはすべてページによって受信されます。

pagePropsはデータ取得メソッドの1つ。
ページにプリロードされた初期プロップを持つオブジェクトで、
そうでなければ空のオブジェクトです。

あおけんあおけん

getInitialProps with App

AppでgetInitialPropsを使用すると、
getStaticPropsを持たないページの自動静的最適化が無効になる。

このパターンの使用はお勧めしない。
その代わりに、ページやレイアウトのデータをより簡単に取得できる、
App Routerを少しずつ採用することを検討する。

// pages/_app.tsx
import App, { AppContext, AppInitialProps, AppProps } from 'next/app'
 
type AppOwnProps = { example: string }
 
export default function MyApp({
  Component,
  pageProps,
  example,
}: AppProps & AppOwnProps) {
  return (
    <>
      <p>Data: {example}</p>
      <Component {...pageProps} />
    </>
  )
}
 
MyApp.getInitialProps = async (
  context: AppContext
): Promise<AppOwnProps & AppInitialProps> => {
  const ctx = await App.getInitialProps(context)
 
  return { ...ctx, example: 'data' }
}