ルートセグメントの設定

ルートセグメントのオプションを使用すると、以下の変数をエクスポートすることで、ページ、レイアウト、またはルートハンドラーの動作を設定できます。

オプション

experimental_ppr

レイアウトまたはページに対して部分的なプリレンダリング (PPR)を有効にします。

export const experimental_ppr = true
// true | false

dynamic

レイアウトまたはページの動的動作を完全に静的または完全に動的に変更します。

export const dynamic = 'auto'
// 'auto' | 'force-dynamic' | 'error' | 'force-static'

重要なポイント: appディレクトリの新しいモデルは、pagesディレクトリのページレベルでのgetServerSidePropsとgetStaticPropsのバイナリ的なオールオアナッシングモデルよりも、fetchリクエストレベルでのきめ細かいキャッシュ制御を優先します。dynamicオプションは、以前のモデルを便宜上再び利用するための方法であり、より簡単な移行パスを提供します。

• 'auto' (デフォルト):可能な限り多くのデータをキャッシュし、動的な動作を選択するコンポーネントを妨げないデフォルトのオプションです。

• 'force-dynamic': 動的レンダリングを強制します。これにより、リクエスト時に各ユーザーに対してルートがレンダリングされます。このオプションは、

  • pagesディレクトリのgetServerSideProps()と同等です。
  • レイアウトまたはページ内のすべてのfetch()リクエストのオプションを{ cache: 'no-store', next: { revalidate: 0 } }に設定することと同じです。
  • セグメント設定をexport const fetchCache = 'force-no-store'に設定することと同じです。

• 'error': 静的レンダリングを強制し、レイアウトまたはページのデータをキャッシュします。コンポーネントが動的APIまたはキャッシュされていないデータを使用する場合、エラーが発生します。このオプションは、

  • pagesディレクトリのgetStaticProps()と同等です。
  • レイアウトまたはページ内のすべてのfetch()リクエストのオプションを{ cache: 'force-cache' }に設定することと同じです。
  • セグメント設定をfetchCache = 'only-cache', dynamicParams = falseに設定することと同じです。
  • dynamic = 'error'は、dynamicParamsのデフォルトをtrueからfalseに変更します。generateStaticParamsによって生成されない動的パラメーターに対してページを動的にレンダリングする場合は、dynamicParams = trueを手動で設定することで再び有効にできます。

• 'force-static': 静的レンダリングを強制し、cookies、headers()、useSearchParams()が空の値を返すように強制することで、レイアウトまたはページのデータをキャッシュします。

重要なポイント:

• getServerSidePropsとgetStaticPropsからdynamic: 'force-dynamic'とdynamic: 'error'に移行する方法については、アップグレードガイドを参照してください。

dynamicParams

generateStaticParamsで生成されなかった動的セグメントにアクセスした際の動作を制御します。

export const dynamicParams = true // true | false,

• true（デフォルト）：generateStaticParamsに含まれていない動的セグメントは、オンデマンドで生成されます。
• false：generateStaticParamsに含まれていない動的セグメントは、404エラーを返します。

重要なポイント:

• このオプションは、`pages`ディレクトリのgetStaticPathsのfallback: true | false | blockingオプションに置き換わります。
• すべてのパスを最初にアクセスしたときに静的にレンダリングするには、generateStaticParamsで空の配列を返すか、export const dynamic = 'force-static'を使用する必要があります。
• dynamicParams = trueの場合、セグメントはストリーミングサーバーレンダリングを使用します。
• dynamic = 'error'とdynamic = 'force-static'が使用されている場合、dynamicParamsのデフォルトはfalseに変更されます。

revalidate

レイアウトまたはページのデフォルトの再検証時間を設定します。このオプションは、個々のfetchリクエストで設定されたrevalidate値を上書きしません。

export const revalidate = false
// false | 0 | number

• false（デフォルト）：cacheオプションを'force-cache'に設定した、または動的APIが使用される前に検出されたすべてのfetchリクエストをキャッシュするためのデフォルトのヒューリスティック。意味的にはrevalidate: Infinityと同等であり、リソースは事実上無期限にキャッシュされることを意味します。個々のfetchリクエストでは、cache: 'no-store'またはrevalidate: 0を使用してキャッシュを回避し、ルートを動的にレンダリングすることができます。または、revalidateをルートのデフォルトよりも小さい正の数値に設定して、ルートの再検証頻度を高めることができます。
• 0：動的APIまたは未キャッシュのデータフェッチが検出されなくても、レイアウトまたはページが常に動的にレンダリングされるようにします。このオプションは、cacheオプションを設定していないfetchリクエストのデフォルトを'no-store'に変更しますが、'force-cache'を選択するか、正のrevalidateを使用するfetchリクエストはそのままにします。
• number：（秒単位）レイアウトまたはページのデフォルトの再検証頻度をn秒に設定します。

重要なポイント:

• revalidate値は、静的に解析可能である必要があります。たとえば、revalidate = 600は有効ですが、revalidate = 60 * 10は無効です。
• runtime = 'edge'を使用している場合、revalidate値は使用できません。
• 開発中は、ページは常にオンデマンドでレンダリングされ、キャッシュされません。これにより、再検証期間を待つことなく、すぐに変更を確認できます。

再検証頻度

• 単一ルートの各レイアウトとページの最小revalidate値が、ルート全体の再検証頻度を決定します。これにより、子ページが親レイアウトと同じ頻度で再検証されます。
• 個々のfetchリクエストは、ルートのデフォルトのrevalidateよりも低いrevalidateを設定して、ルート全体の再検証頻度を高めることができます。これにより、特定の基準に基づいて、特定のルートの再検証頻度を動的に増やすことができます。

fetchCache

export const fetchCache = 'auto'
// 'auto' | 'default-cache' | 'only-cache'
// 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store'

runtime

アプリケーションのレンダリングにはNode.jsランタイムを、ミドルウェアにはEdgeランタイムを使用することをお勧めします（サポートされている唯一のオプションです）。

export const runtime = 'nodejs'
// 'nodejs' | 'edge'

• 'nodejs'（デフォルト）
• 'edge'

異なるランタイムの詳細については、こちらをご覧ください。

preferredRegion

export const preferredRegion = 'auto'
// 'auto' | 'global' | 'home' | ['iad1', 'sfo1']

preferredRegionとサポートされているリージョンは、デプロイメントプラットフォームによって異なります。

重要なポイント:

• preferredRegionが指定されていない場合、最も近い親レイアウトのオプションを継承します。
• ルートレイアウトはデフォルトですべてのリージョンになります。

maxDuration

デフォルトでは、Next.jsはサーバーサイドロジックの実行（ページのレンダリングまたはAPIの処理）を制限しません。デプロイメントプラットフォームは、Next.jsビルド出力からmaxDurationを使用して、特定の実行制限を追加できます。たとえば、Vercelなど。

注記：この設定には、Next.js 13.4.10以降が必要です。

export const maxDuration = 5

重要なポイント:

• サーバーアクションを使用する場合は、ページレベルでmaxDurationを設定して、ページで使用されるすべてのサーバーアクションのデフォルトのタイムアウトを変更します。

generateStaticParams

generateStaticParams関数は、動的ルートセグメントと組み合わせて使用して、リクエスト時にオンデマンドで生成するのではなく、ビルド時に静的に生成されるルートセグメントパラメータのリストを定義できます。

詳細については、APIリファレンスを参照してください。

バージョン履歴