コンテンツにスキップ

ルートセグメント設定

知っておくと良いこと:

  • このページで概説されているオプションは、cacheComponentsフラグがオンの場合、無効になり、将来的に廃止される予定です。
  • ルートセグメントオプションは、サーバーコンポーネントのページ、レイアウト、またはルートハンドラーでのみ有効です。
  • generateStaticParams'use client'ファイル内では使用できません。

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

オプションタイプデフォルト
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デプロイメントプラットフォームによって設定されます

オプション

dynamic

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

layout.tsx | page.tsx | route.ts
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'に設定すること。
  • 'force-static': cookiesheaders()、およびuseSearchParams()に空の値を返すように強制することで、レイアウトまたはページの静的レンダリングを強制し、データをキャッシュします。force-staticでレンダリングされたページまたはレイアウトで、revalidaterevalidatePath、またはrevalidateTagを使用することは可能です。

知っておくと良いこと:

  • getServerSidePropsおよびgetStaticPropsからdynamic: 'force-dynamic'およびdynamic: 'error'への移行方法については、アップグレードガイドで確認できます。

dynamicParams

generateStaticParamsで生成されなかった動的セグメントが訪問された場合に何が起こるかを制御します。

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

知っておくと良いこと:

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

revalidate

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

layout.tsx | page.tsx | route.ts
export const revalidate = false
// false | 0 | number
  • false (デフォルト): cacheオプションを'force-cache'に設定したすべてのfetchリクエスト、または動的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値は利用できません。
  • 開発中は、ページは常にオンデマンドでレンダリングされ、決してキャッシュされません。これにより、再検証期間が経過するのを待つことなく、変更をすぐに確認できます。

Revalidation Frequency

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

fetchCache

これは高度なオプションであり、デフォルトの動作を明示的にオーバーライドする必要がある場合にのみ使用してください。

デフォルトでは、Next.jsは、動的APIよりも前に到達可能なfetch()リクエストをキャッシュし、動的APIの後に検出されたfetchリクエストはキャッシュしません

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

layout.tsx | page.tsx | route.ts
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より後のfetchリクエストはキャッシュしないデフォルトのオプション。
  • 'default-cache': fetchに任意のcacheオプションを渡すことを許可しますが、オプションが提供されていない場合はcacheオプションを'force-cache'に設定します。これは、動的APIの後のfetchリクエストも静的と見なされることを意味します。
  • 'only-cache': オプションが提供されていない場合のデフォルトをcache: 'force-cache'に変更し、cache: 'no-store'を使用するfetchリクエストでエラーを発生させることで、すべてのfetchリクエストがキャッシュをオプトインするようにします。
  • 'force-cache': すべてのfetchリクエストのcacheオプションを'force-cache'に設定することで、すべてのfetchリクエストがキャッシュをオプトインするようにします。
  • 'default-no-store': fetchに任意のcacheオプションを渡すことを許可しますが、オプションが提供されていない場合はcacheオプションを'no-store'に設定します。これは、動的APIより前のfetchリクエストも動的と見なされることを意味します。
  • 'only-no-store': オプションが提供されていない場合のデフォルトをcache: 'no-store'に変更し、cache: 'force-cache'を使用するfetchリクエストでエラーを発生させることで、すべてのfetchリクエストがキャッシュをオプトアウトするようにします。
  • 'force-no-store': すべてのfetchリクエストのcacheオプションを'no-store'に設定することで、すべてのfetchリクエストがキャッシュをオプトアウトするようにします。これにより、'force-cache'オプションが提供されていても、すべてのfetchリクエストはリクエストごとに再取得されます。

Cross-route segment behavior

  • 単一ルートの各レイアウトとページ全体で設定されたオプションは、互換性がある必要があります。
    • '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'を提供する場合、同じfetchで異なる動作が発生する可能性があるため、許可されません。
  • 一般的には、共有の親レイアウトを'auto'のままにし、子セグメントが分岐する場所でオプションをカスタマイズすることが推奨されます。

runtime

アプリケーションのレンダリングにはNode.jsランタイムを使用し、プロキシにはEdgeランタイムの使用を推奨します。

layout.tsx | page.tsx | route.ts
export const runtime = 'nodejs'
// 'nodejs' | 'edge'
  • 'nodejs' (デフォルト)
  • 'edge'

preferredRegion

layout.tsx | page.tsx | route.ts
export const preferredRegion = 'auto'
// 'auto' | 'global' | 'home' | ['iad1', 'sfo1']

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

知っておくと良いこと:

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

maxDuration

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

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

layout.tsx | page.tsx | route.ts
export const maxDuration = 5

知っておくと良いこと:

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

generateStaticParams

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

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

バージョン履歴

バージョン
v16.0.0export const experimental_ppr = trueは削除されました。コードモッドが利用可能です。
v15.0.0-RCexport const runtime = "experimental-edge"は非推奨です。コードモッドが利用可能です。