ルートセグメント設定

このページに記載されているオプションは、dynamicIO フラグがオンになっている場合、無効になり、将来的には非推奨となる予定です。

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

オプション

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': 動的レンダリングを強制します。これにより、リクエスト時に各ユーザー向けにルートがレンダリングされます。このオプションは以下と同等です。

  • レイアウトまたはページ内のすべての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が指定されていない場合、最も近い親レイアウトのオプションを継承します。
• ルートレイアウトはデフォルトでallリージョンです。

maxDuration

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

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

export const maxDuration = 5

知っておくと良いこと:

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

generateStaticParams

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

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

バージョン履歴