ルートセグメント設定

このページで概説されているオプションは、dynamicIO フラグがオンの場合は無効になり、将来的に廃止される予定です。

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

オプション

experimental_ppr

レイアウトまたはページの部分的プリレンダリング（PPR）を有効にします。

export const experimental_ppr = true
// true | false

dynamic

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

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

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

補足: appディレクトリの新しいモデルは、pagesディレクトリのページレベルのgetServerSidePropsとgetStaticPropsのバイナリな all-or-nothing モデルよりも、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に変更します。dynamicParams = trueを手動で設定することで、generateStaticParamsで生成されていない動的パラメータのページを動的にレンダリングできます。

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

補足：

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

dynamicParams

generateStaticParamsで生成されていない動的セグメントにアクセスした場合の挙動を制御します。

export const dynamicParams = true // true | false,

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

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

• false (デフォルト): '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'

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'

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

• 'nodejs' (デフォルト)
• 'edge'

異なるランタイムについて詳しく学ぶ。

preferredRegion

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

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

export const maxDuration = 5

補足:

• Server Actionsを使用する場合、ページレベルでmaxDurationを設定して、ページ上のすべてのServer Actionsのデフォルトタイムアウトを変更できます。

generateStaticParams

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

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

バージョン履歴