ルートセグメント設定

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

export const dynamic = 'auto'
export const dynamicParams = true
export const revalidate = false
export const fetchCache = 'auto'
export const runtime = 'nodejs'
export const preferredRegion = 'auto'
export const maxDuration = 5

export default function MyComponent() {}

export const dynamic = 'auto'
export const dynamicParams = true
export const revalidate = false
export const fetchCache = 'auto'
export const runtime = 'nodejs'
export const preferredRegion = 'auto'
export const maxDuration = 5

export default function MyComponent() {}

知っておくと便利:

• 設定オプションの値は現在、静的に解析可能である必要があります。例えば revalidate = 600 は有効ですが、revalidate = 60 * 10 は無効です。

オプション

dynamic

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

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

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

知っておくと便利: app ディレクトリの新しいモデルでは、pages ディレクトリでのページレベルの getServerSideProps や getStaticProps の全か無かのバイナリモデルよりも、fetch リクエストレベルでの細かいキャッシュ制御が優先されます。dynamic オプションは、利便性のために以前のモデルに戻す方法であり、より簡単な移行パスを提供します。

• 'auto' (デフォルト): コンポーネントが動的動作を選択するのを妨げずに、可能な限りキャッシュするデフォルトオプション。
• 'force-dynamic': fetch リクエストのすべてのキャッシュを無効にし、常に再検証することで、レイアウトまたはページの動的レンダリングとキャッシュされていないデータ取得を強制します。このオプションは以下と同等です:
  • pages ディレクトリの getServerSideProps()
  • レイアウトまたはページ内のすべての fetch() リクエストのオプションを { cache: 'no-store', next: { revalidate: 0 } } に設定
  • セグメント設定を export const fetchCache = 'force-no-store' に設定
• 'error': 動的関数またはキャッシュされていないデータを使用するコンポーネントがある場合にエラーを発生させ、レイアウトまたはページの静的レンダリングとデータのキャッシュを強制します。このオプションは以下と同等です:
  • pages ディレクトリの getStaticProps()
  • レイアウトまたはページ内のすべての fetch() リクエストのオプションを { cache: 'force-cache' } に設定
  • セグメント設定を fetchCache = 'only-cache', dynamicParams = false に設定
  • dynamic = 'error' は dynamicParams のデフォルトを true から false に変更します。generateStaticParams で生成されていない動的パラメータに対して動的レンダリングを行うには、手動で dynamicParams = true を設定できます。
• 'force-static': cookies()、headers()、useSearchParams() が空の値を返すように強制することで、レイアウトまたはページの静的レンダリングとデータのキャッシュを強制します。

知っておくと便利:

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

dynamicParams

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

export const dynamicParams = true // true | false,

export const dynamicParams = true // true | false,

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

知っておくと便利:

• このオプションは pages ディレクトリの getStaticPaths の fallback: true | false | blocking オプションを置き換えます。
• dynamicParams = true の場合、セグメントはストリーミングサーバーレンダリングを使用します。
• dynamic = 'error' と dynamic = 'force-static' を使用すると、dynamicParams のデフォルトが false に変更されます。

revalidate

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

export const revalidate = false
// false | 'force-cache' | 0 | number

export const revalidate = false
// false | 'force-cache' | 0 | number

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

知っておくと便利: revalidate オプションはNode.jsランタイムを使用している場合にのみ利用可能です。つまり、runtime = 'edge' で revalidate オプションを使用しても機能しません。

再検証頻度

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

fetchCache

export const fetchCache = 'auto'
// 'auto' | 'default-cache' | 'only-cache'
// 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store'

export const fetchCache = 'auto'
// 'auto' | 'default-cache' | 'only-cache'
// 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store'

runtime

export const runtime = 'nodejs'
// 'edge' | 'nodejs'

export const runtime = 'nodejs'
// 'edge' | 'nodejs'

• nodejs (デフォルト)
• edge

EdgeおよびNode.jsランタイムについて詳しく学びます。

preferredRegion

export const preferredRegion = 'auto'
// 'auto' | 'global' | 'home' | ['iad1', 'sfo1']

export const preferredRegion = 'auto'
// 'auto' | 'global' | 'home' | ['iad1', 'sfo1']

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

知っておくと便利:

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

maxDuration

デプロイメントプラットフォームに基づいて、関数のデフォルトの実行時間をより長く使用できる場合があります。 この設定により、プランの制限内でより長い実行時間を選択できます。 注: この設定にはNext.js 13.4.10 以降が必要です。

export const maxDuration = 5

export const maxDuration = 5

知っておくと便利:

• maxDuration が指定されていない場合、デフォルト値はデプロイメントプラットフォームとプランに依存します。

generateStaticParams

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

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