ルートセグメント設定

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

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

オプションデフォルト
experimental_pprboolean
dynamic'auto' | 'force-dynamic' | 'error' | 'force-static''auto'
dynamicParamsbooleantrue
revalidatefalse | 0 | numberfalse
fetchCache'auto' | 'default-cache' | 'only-cache' | 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store''auto'
runtime'nodejs' | 'edge''nodejs'
preferredRegion'auto' | 'global' | 'home' | string | string[]'auto'
maxDurationnumberデプロイプラットフォームによって設定

オプション

experimental_ppr

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

export const experimental_ppr = true
// true | false

dynamic

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

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

知っておくと良いこと: appディレクトリの新しいモデルでは、pagesディレクトリのページレベルでのgetServerSidePropsgetStaticPropsのバイナリ全か無かのモデルよりも、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': 静的レンダリングを強制し、cookiesheaders()useSearchParams()が空の値を返すようにすることで、レイアウトまたはページのデータをキャッシュします。force-staticでレンダリングされたページやレイアウトでrevalidaterevalidatePathrevalidateTagを使用することが可能です。

知っておくと良いこと:

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

dynamicParams

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

export const dynamicParams = true // true | false,
  • true (デフォルト): generateStaticParamsに含まれていない動的セグメントはオンデマンドで生成されます。
  • false: generateStaticParamsに含まれていない動的セグメントは404を返します。

知っておくと良いこと:

  • このオプションは、pagesディレクトリのgetStaticPathsfallback: true | false | blockingオプションを置き換えます。
  • 初回アクセス時にすべてのパスを静的にレンダリングするには、generateStaticParamsで空の配列を返すか、export const dynamic = 'force-static'を使用する必要があります。
  • dynamicParams = trueの場合、セグメントはストリーミングサーバーレンダリングを使用します。

revalidate

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

export const revalidate = false
// false | 0 | number
  • false (デフォルト): 'force-cache'に設定されたfetchリクエストや動的APIが使用される前に発見されたリクエストをキャッシュするデフォルトのヒューリスティック。意味的にはrevalidate: Infinityと同等で、リソースは事実上無期限にキャッシュされます。個々のfetchリクエストでcache: 'no-store'revalidate: 0を使用してキャッシュを回避し、ルートを動的にレンダリングすることも可能です。または、revalidateをルートのデフォルトよりも小さい正の数に設定して、ルートの再検証頻度を上げることができます。
  • 0: 動的レンダリングが動的APIやキャッシュされていないデータフェッチが発見されていない場合でも常に行われるようにします。このオプションは、cacheオプションを設定していないfetchリクエストのデフォルトを'no-store'に変更しますが、'force-cache'を選択したfetchリクエストや正のrevalidateを使用したリクエストはそのままにします。
  • number: (秒単位) レイアウトまたはページのデフォルトの再検証頻度をn秒に設定します。

知っておくと良いこと:

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

再検証頻度

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

fetchCache

これはデフォルトの動作を上書きする必要がある場合にのみ使用する高度なオプションです。

デフォルトでは、Next.jsは動的APIが使用される前に到達可能なすべてのfetch()リクエストをキャッシュし、動的APIが使用された後に発見されたfetchリクエストはキャッシュしません。

fetchCacheを使用すると、レイアウトまたはページ内のすべてのfetchリクエストのデフォルトのcacheオプションを上書きできます。

export const fetchCache = 'auto'
// 'auto' | 'default-cache' | 'only-cache'
// 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store'
  • 'auto' (デフォルト): 動的APIの前にfetchリクエストを提供されたcacheオプションでキャッシュし、動的APIの後はキャッシュしないデフォルトのオプション。
  • 'default-cache': fetchに任意のcacheオプションを渡すことを許可しますが、オプションが提供されていない場合はcacheオプションを'force-cache'に設定します。これにより、動的APIの後でもfetchリクエストが静的と見なされます。
  • 'only-cache': すべてのfetchリクエストがキャッシュを選択することを保証します。オプションが提供されていない場合のデフォルトをcache: 'force-cache'に変更し、cache: 'no-store'を使用するfetchリクエストがある場合はエラーを発生させます。
  • 'force-cache': すべてのfetchリクエストのcacheオプションを'force-cache'に設定することで、すべてのfetchリクエストがキャッシュを選択することを保証します。
  • 'default-no-store': fetchに任意のcacheオプションを渡すことを許可しますが、オプションが提供されていない場合はcacheオプションを'no-store'に設定します。これにより、動的APIの前でもfetchリクエストが動的と見なされます。
  • 'only-no-store': すべてのfetchリクエストがキャッシュを選択しないことを保証します。オプションが提供されていない場合のデフォルトをcache: 'no-store'に変更し、cache: 'force-cache'を使用するfetchリクエストがある場合はエラーを発生させます。
  • 'force-no-store': すべてのfetchリクエストのcacheオプションを'no-store'に設定することで、すべてのfetchリクエストがキャッシュを選択しないことを保証します。これにより、'force-cache'オプションを提供している場合でも、すべてのfetchリクエストがリクエストごとに再フェッチされます。

クロスルートセグメントの動作

  • 単一ルートの各レイアウトとページに設定されたオプションは互いに互換性がある必要があります。
    • 'only-cache''force-cache'の両方が提供されている場合、'force-cache'が優先されます。'only-no-store''force-no-store'の両方が提供されている場合、'force-no-store'が優先されます。forceオプションはルート全体の動作を変更するため、'force-*'を持つ単一のセグメントがあれば、'only-*'によって引き起こされるエラーを防ぎます。
    • 'only-*''force-*'オプションの目的は、ルート全体が完全に静的または完全に動的であることを保証することです。つまり:
      • 単一ルートで'only-cache''only-no-store'を組み合わせることはできません。
      • 単一ルートで'force-cache''force-no-store'を組み合わせることはできません。
    • 親が'default-no-store'を提供している場合、子が'auto'または'*-cache'を提供することはできません。これにより、同じフェッチが異なる動作をする可能性があるためです。
  • 一般的には、共有親レイアウトを'auto'のままにし、子セグメントが分岐する場所でオプションをカスタマイズすることをお勧めします。

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を使用して特定の実行制限を追加できます。

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

export const maxDuration = 5

知っておくと良いこと:

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

generateStaticParams

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

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

バージョン履歴

バージョン
v15.0.0-RCexport const runtime = "experimental-edge"は非推奨になりました。コードモッドが利用可能です。

On this page