Route Segment Config

Route セグメントの options は、以下の変数を直接 export することにより、Page、Layout、またはRoute Handlerの動作を設定することができます：

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() {}

Good to know:

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

Options

dynamic

layout またはページの dynamic 行動を完全に静的または完全に dynamic に変更します。

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

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

Good to know: appディレクトリの新モデルは、pagesディレクトリのページレベルでのgetServerSidePropsやgetStaticPropsによる binary な全てか無かのモデルよりも、fetchの request レベルでの細かいキャッシング制御を優先します。 dynamicオプションは、以前のモデルに便利に戻るための方法であり、より簡単な移行の path を提供します。

• 'auto' ( default )：可能な限り多くの cache を行いつつ、どの components も dynamic な動作を選択できるようにする default のオプション。

• 'force-dynamic': フォースdynamic renderingにより、ユーザーごとに routes が request 時間にレンダリングされます。このオプションは pages ディレクトリの getServerSideProps() と同等です。

• 'error': 静的 rendering を強制し、 layout やページのデータを cache することで、dynamic 関数やキャッシュされていないデータを使用する components がある場合には error を引き起こします。このオプションは次に等しいです：

  • pagesディレクトリのgetStaticProps()。

• すべてのfetch()の request を、 layout またはページに{ cache: 'force-cache' }として設定する。

• セグメント config を fetchCache = 'only-cache', dynamicParams = false に設定します。

• dynamic = 'error'は、dynamicParamsの default をtrueからfalseに変更します。generateStaticParamsによって生成されなかった dynamic params のページを動的にレンダリングするためには、手動でdynamicParams = trueを設定することで再オプトインすることができます。

• 'force-static': 静的 rendering を強制し、cookies()、headers()、useSearchParams()が empty の values を返すよう強制することで、 layout またはページのデータを cache します。

Good to know:

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

dynamicParams

generateStaticParamsで生成されなかった dynamic セグメントが閲覧された時に何が起こるかを制御します。

export const dynamicParams = true // true | false,

export const dynamicParams = true // true | false,

• true ( default )：generateStaticParamsに含まれていない Dynamic セグメントは、要求に応じて生成されます。
• false: Dynamic segments not included in generateStaticParams will return a 404.

Good to know:

• このオプションは、pagesディレクトリのgetStaticPathsのfallback: true | false | blockingオプションを置き換えます。
• dynamicParams = trueの場合、セグメントは Streaming Server Renderingを使用します。
• dynamic = 'error'とdynamic = 'force-static'が使われる場合、dynamicParamsの default はfalseに変わります。

revalidate

layout またはページの default の再認証時間を設定します。このオプションは、個々のfetchRequest によって設定されたrevalidateの value を上書きしません。

export const revalidate = false
// false | 0 | number

export const revalidate = false
// false | 0 | number

• false:(default)default のヒューリスティックは、cacheオプションを'force-cache'に設定したfetchrequests や、動的関数が使用される前に発見されたものを cache します。これはrevalidate: Infinityと意味的に等しく、リソースが無制限にキャッシュされることを意味します。それでも、個々のfetchrequests がcache: 'no-store'を使用するか、revalidate: 0を使用してキャッシュを避け、route を動的に rendering することが可能です。または、リヴァリデーションの頻度を増やすために、revalidateをルート default よりも低い正の数 values に設定します。
• 0: dynamic 関数やキャッシュされていないデータフェッチが見つからなくても、 layout またはページが常に動的にレンダリングされるようにします。このオプションは、cacheオプションを設定していないfetchリクエストの default を'no-store'に変更しますが、'force-cache'を適用したり、revalidateを正に設定したfetchリクエストについてはそのままです。
• number: (秒単位) layout またはページの default 再検証頻度を n 秒に設定します。

Good to know: revalidateオプションは、Node.js Runtimeを使用している場合にのみ利用可能です。つまり、runtime = 'edge'と共にrevalidateオプションを使用することはできません。

再検証の頻度

• 単一の route の各 layout とページごとの最低の revalidate が、 全体の route の再検証頻度を決定します。これにより、子ページが親レイアウトと同じ頻度で再検証されることが保証されます。
• 個別のfetchリクエストでは、ルートの default のrevalidateよりも低いrevalidateを設定して、全体の route の再検証頻度を上げることができます。これにより、一部の基準に基づいて特定の routes でより頻繁な再検証を選択することができます。

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 ( default )
• edge

Edge や Node.js ランタイムについて詳しく学びましょう。

preferredRegion

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

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

preferredRegionのサポート、およびサポートされている地域は、あなたのデプロイメントプラットフォームに依存します。

Good to know:

• preferredRegionが指定されていない場合、最も近い親の layout のオプションを継承します。
• root layout は default でallリージョンに設定されています。

maxDuration

default では、 Next.js build は server-side ロジック(ページの rendering や API の処理)の実行を制限しません。デプロイメントプラットフォームは、 Next.js build の出力からmaxDurationを使用して特定の実行制限を追加できます。例えば、Vercel などです。

注釈: この settings は Next.js のバージョン 13.4.10 以上が必要です。

export const maxDuration = 5

export const maxDuration = 5

Good to know:

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

generateStaticParams

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

詳細については、API referenceをご覧ください。