Menu

ルートセグメント設定

補足:

  • このページで説明するオプションは、cacheComponentsフラグが有効な場合は無効になり、将来的に非推奨になります。
  • ルートセグメントオプションは、Server Component Pages、Layouts、またはRoute Handlersでのみ有効です。
  • generateStaticParamsは、'use client'ファイル内では使用できません。

ルートセグメントオプションでは、以下の変数を直接エクスポートすることで、PageLayout、またはRoute Handlerの動作を設定できます。

オプションデフォルト値
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またはPageの動的な動作を完全に静的、または完全に動的に変更します。

layout.tsx
TypeScript
export const dynamic = 'auto'
// 'auto' | 'force-dynamic' | 'error' | 'force-static'

補足: appディレクトリの新しいモデルは、pagesディレクトリのgetServerSidePropsgetStaticPropsの二者択一モデルではなく、fetchリクエストレベルでのきめ細かいキャッシュ制御を優先します。dynamicオプションは、前のモデルへのオプトインを行う方法であり、より簡単な移行パスを提供します。

  • 'auto'(デフォルト): コンポーネントが動的な動作を選択できるようにしながら、可能な限り多くをキャッシュするデフォルトオプションです。

  • 'force-dynamic': 動的レンダリングを強制し、リクエスト時に各ユーザーに対してルートがレンダリングされます。このオプションは、以下と同等です:

    • LayoutまたはPage内のすべてのfetch()リクエストのオプションを{ cache: 'no-store', next: { revalidate: 0 } }に設定する。
    • セグメント設定をexport const fetchCache = 'force-no-store'に設定する。
  • 'error': 静的レンダリングを強制し、Dynamic APIsを使用するコンポーネントまたはキャッシュされていないデータがある場合にエラーを発生させることで、LayoutまたはPageのデータをキャッシュします。このオプションは、以下と同等です:

    • pagesディレクトリのgetStaticProps()
    • LayoutまたはPage内のすべてのfetch()リクエストのオプションを{ cache: 'force-cache' }に設定する。
    • セグメント設定をfetchCache = 'only-cache'に設定する。
  • 'force-static': 静的レンダリングを強制し、cookiesheaders()、およびuseSearchParams()に空の値を返させることで、LayoutまたはPageのデータをキャッシュします。force-staticでレンダリングされたページやレイアウトでrevalidaterevalidatePath、またはrevalidateTagを使用することは可能です。

補足:

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

dynamicParams

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

layout.tsx
TypeScript
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

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

layout.tsx
TypeScript
export const revalidate = false
// false | 0 | number
  • false(デフォルト): cacheオプションを'force-cache'に設定するか、Dynamic APIが使用される前に検出されたfetchリクエストをキャッシュするデフォルトのヒューリスティック。意味的にはrevalidate: Infinityと同等であり、リソースが無期限にキャッシュされるべきであることを効果的に意味します。個々のfetchリクエストは、キャッシュを避けてルートを動的にレンダリングするためにcache: 'no-store'またはrevalidate: 0を使用することができます。または、ルートの再検証頻度を高めるために、ルートデフォルトより低い正の数値にrevalidateを設定します。
  • 0: Dynamic APIやキャッシュされていないデータフェッチが検出されなくても、LayoutまたはPageが常に動的にレンダリングされるようにします。このオプションは、cacheオプションを設定しないfetchリクエストのデフォルトを'no-store'に変更しますが、'force-cache'を選択するか正のrevalidateを使用するfetchリクエストはそのままにします。
  • number:(秒単位)LayoutまたはPageのデフォルト再検証頻度をn秒に設定します。

補足:

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

再検証頻度

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

fetchCache

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

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

fetchCacheでは、LayoutまたはPage内のすべてのfetchリクエストのデフォルトcacheオプションをオーバーライドできます。

layout.tsx
TypeScript
export const fetchCache = 'auto'
// 'auto' | 'default-cache' | 'only-cache'
// 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store'
  • 'auto'(デフォルト): Dynamic APIsの前のfetchリクエストを提供されるcacheオプションでキャッシュし、Dynamic APIsの後のfetchリクエストをキャッシュしないデフォルトオプション。
  • 'default-cache': fetchに渡すすべてのcacheオプションを許可しますが、オプションが提供されない場合はcacheオプションを'force-cache'に設定します。これは、Dynamic APIsの後の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'に設定します。これは、Dynamic APIsの前のfetchリクエストでさえ動的であると見なされることを意味します。
  • 'only-no-store': オプションが提供されない場合デフォルトをcache: 'no-store'に変更し、cache: 'force-cache'を使用するすべてのfetchリクエストでエラーが発生させることで、すべてのfetchリクエストをキャッシュアウトすることを保証します。
  • 'force-no-store': すべてのfetchリクエストのcacheオプションを'no-store'に設定することで、すべてのfetchリクエストをキャッシュアウトすることを保証します。これにより、'force-cache'オプションを提供する場合でも、すべてのfetchリクエストがすべてのリクエストで再フェッチされます。

ルート間セグメントの動作

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

runtime

Node.js runtimeを使用してアプリケーションをレンダリングすることをお勧めします。このオプションは、Proxyでは使用できません。

補足: runtime: 'edge'の使用は、Cache Componentsではサポートされていません

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

preferredRegion

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

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

補足:

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

maxDuration

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

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

layout.tsx
TypeScript
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"が非推奨になりました。コードモッドが利用可能です。