ルートセグメント設定
このページで説明されているオプションは、
dynamicIO
フラグが有効な場合には無効になり、将来的に廃止される予定です。
ルートセグメントオプションを使用すると、以下の変数を直接エクスポートすることで、ページ、レイアウト、またはルートハンドラーの動作を設定できます:
オプション | 型 | デフォルト |
---|---|---|
experimental_ppr | boolean | |
dynamic | 'auto' | 'force-dynamic' | 'error' | 'force-static' | 'auto' |
dynamicParams | boolean | true |
revalidate | false | 0 | number | false |
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' |
maxDuration | number | デプロイプラットフォームによって設定 |
オプション
experimental_ppr
レイアウトまたはページに対して部分的なプリレンダリング (PPR)を有効にします。
dynamic
レイアウトまたはページの動的動作を完全に静的または完全に動的に変更します。
知っておくと良いこと:
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()
が空の値を返すようにすることで、レイアウトまたはページのデータをキャッシュします。force-static
でレンダリングされたページやレイアウトでrevalidate
、revalidatePath
、revalidateTag
を使用することが可能です。
知っておくと良いこと:
getServerSideProps
とgetStaticProps
からdynamic: 'force-dynamic'
およびdynamic: 'error'
への移行方法については、アップグレードガイドを参照してください。
dynamicParams
generateStaticParamsで生成されていない動的セグメントにアクセスしたときの動作を制御します。
true
(デフォルト):generateStaticParams
に含まれていない動的セグメントはオンデマンドで生成されます。false
:generateStaticParams
に含まれていない動的セグメントは404を返します。
知っておくと良いこと:
- このオプションは、
pages
ディレクトリのgetStaticPaths
のfallback: true | false | blocking
オプションを置き換えます。- 初回アクセス時にすべてのパスを静的にレンダリングするには、
generateStaticParams
で空の配列を返すか、export const dynamic = 'force-static'
を使用する必要があります。dynamicParams = true
の場合、セグメントはストリーミングサーバーレンダリングを使用します。
revalidate
レイアウトまたはページのデフォルトの再検証時間を設定します。このオプションは、個々のfetch
リクエストで設定されたrevalidate
値を上書きしません。
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
オプションを上書きできます。
'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ランタイムを使用することを推奨します。
'nodejs'
(デフォルト)'edge'
preferredRegion
preferredRegion
のサポートとサポートされているリージョンは、デプロイメントプラットフォームに依存します。
知っておくと良いこと:
preferredRegion
が指定されていない場合、最も近い親レイアウトのオプションを継承します。- ルートレイアウトはデフォルトで
all
リージョンに設定されます。
maxDuration
デフォルトでは、Next.jsはサーバーサイドロジック(ページのレンダリングやAPIの処理)の実行時間を制限しません。
デプロイメントプラットフォームは、Next.jsのビルド出力からmaxDuration
を使用して特定の実行制限を追加できます。
注: この設定にはNext.js 13.4.10
以降が必要です。
知っておくと良いこと:
- サーバーアクションを使用している場合、ページレベルで
maxDuration
を設定すると、そのページで使用されるすべてのサーバーアクションのデフォルトのタイムアウトが変更されます。
generateStaticParams
generateStaticParams
関数は、動的ルートセグメントと組み合わせて使用することで、ビルド時に静的に生成されるルートセグメントパラメータのリストを定義できます。リクエスト時にオンデマンドで生成されるのではなく、事前に生成されます。
詳細については、APIリファレンスを参照してください。
バージョン履歴
バージョン | |
---|---|
v15.0.0-RC | export const runtime = "experimental-edge" は非推奨になりました。コードモッドが利用可能です。 |