ルートセグメント設定

このページで説明されているオプションは、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 (デフォルト): '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

補足:

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

generateStaticParams

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

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

バージョン履歴