Sponsor
ChatHubChatHub Use GPT-4, Gemini, Claude 3.5 and more chatbots side-by-side
ここをクリック
Menu

ルートセグメント設定

このページで説明されているオプションは、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)を有効にします。

layout.tsx
TypeScript
export const experimental_ppr = true
// true | false

dynamic

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

layout.tsx
TypeScript
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() が空の値を返すよう強制することで、レイアウトまたはページの静的レンダリングとデータのキャッシュを強制します。

補足:

dynamicParams

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

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

補足

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

revalidate

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

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

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

デフォルトでは、Next.jsは動的APIが使用されるに到達可能な任意の fetch() リクエストをキャッシュし、動的APIのに検出された fetch リクエストはキャッシュしません

fetchCache を使用すると、レイアウトまたはページ内のすべての 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' (デフォルト): 動的APIの前に fetch リクエストを提供された cache オプションでキャッシュし、動的API後の fetch リクエストはキャッシュしないデフォルトオプション。
  • 'default-cache': fetch に任意の cache オプションを渡すことを許可しますが、オプションが提供されない場合は cache オプションを 'force-cache' に設定します。これは、動的API後の fetch リクエストでも静的と見なされることを意味します。
  • 'only-cache': オプションが提供されない場合にデフォルトを cache: 'force-cache' に変更し、任意の fetch リクエストが cache: 'no-store' を使用するとエラーを発生させることで、すべての fetch リクエストがキャッシュにオプトインすることを保証します。
  • 'force-cache': すべての fetch リクエストの cache オプションを 'force-cache' に設定することで、すべての fetch リクエストがキャッシュにオプトインすることを保証します。
  • 'default-no-store': fetch に任意の cache オプションを渡すことを許可しますが、オプションが提供されない場合は cache オプションを 'no-store' に設定します。これは、動的API前の fetch リクエストでも動的と見なされることを意味します。
  • 'only-no-store': オプションが提供されない場合にデフォルトを cache: 'no-store' に変更し、任意の fetch リクエストが 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-*' を持つ単一のセグメントは、'only-*' によって引き起こされるエラーを防ぎます。
    • 'only-*''force-*' オプションの意図は、ルート全体を完全に静的または完全に動的にすることです。これは次のことを意味します:
      • 単一ルート内での 'only-cache''only-no-store' の組み合わせは許可されません。
      • 単一ルート内での 'force-cache''force-no-store' の組み合わせは許可されません。
    • 子が 'auto' または '*-cache' を提供する場合、親は 'default-no-store' を提供できません。これにより、同じフェッチが異なる動作を持つ可能性があるためです。
  • 一般的に、共有される親レイアウトは 'auto' のままにし、子セグメントが分岐する場所でオプションをカスタマイズすることをお勧めします。

runtime

アプリケーションのレンダリングには Node.js ランタイムを、ミドルウェアには Edge ランタイム(サポートされている唯一のオプション)を使用することをお勧めします。

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

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

layout.tsx
TypeScript
export const maxDuration = 5

補足:

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

generateStaticParams

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

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

バージョン履歴

バージョン内容
v15.0.0-RCexport const runtime = "experimental-edge" は非推奨。codemodが利用可能です。