Route Segment Config

Rota Segmenti seçenekleri, aşağıdaki değişkenleri doğrudan dışa aktararak bir Sayfa, Düzen veya Rota İşleyicisinin davranışını yapılandırmanıza olanak tanır:

Option	Type	Default
`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`	Set by deployment platform

layout.tsx | page.tsx | route.ts

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

Bildiğim iyi oldu:

Yapılandırma seçeneklerinin değerlerinin şu anda statik olarak analiz edilebilir olması gerekir. Örneğin revalidate = 600 geçerlidir, ancak revalidate = 60 * 10 geçerli değildir.

Options

`dynamic`

Bir düzen veya sayfanın dinamik davranışını tamamen statik veya tamamen dinamik olarak değiştirin.

layout.tsx | page.tsx | route.ts

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

Bilmekte fayda var: app dizinindeki yeni model, pages dizinindeki sayfa düzeyinde getServerSideProps ve getStaticProps 'un ikili ya hep ya hiç modeli yerine fetch istek düzeyinde ayrıntılı önbellekleme kontrolünü tercih eder. dynamic seçeneği, kolaylık sağlamak için önceki modele geri dönmenin bir yoludur ve daha basit bir geçiş yolu sağlar.

'auto' (varsayılan): Herhangi bir bileşenin dinamik davranışı seçmesini engellemeden mümkün olduğunca önbelleğe almak için varsayılan seçenek.
'force-dynamic': İstek anında her kullanıcı için rotaların oluşturulmasına neden olacak dinamik oluşturmayı zorla. Bu seçenek pages dizinindeki getServerSideProps() ile eşdeğerdir.
'error': Herhangi bir bileşen dinamik işlevler veya önbelleğe alınmamış veriler kullanırsa bir hataya neden olarak statik oluşturmayı zorlayın ve bir düzen veya sayfanın verilerini önbelleğe alın. Bu seçenek şuna eşdeğerdir:
- getStaticProps() pages dizininde.
- Bir düzen veya sayfadaki her fetch() isteğinin seçeneğini { cache: 'force-cache' } olarak ayarlama.
- Segment yapılandırmasını fetchCache = 'only-cache', dynamicParams = false olarak ayarlama.
- dynamic = 'error' dynamicParams varsayılanını true 'den false'ye değiştirir. generateStaticParams tarafından oluşturulmayan dinamik paramlar için sayfaları dinamik olarak oluşturmaya dynamicParams = true'u manuel olarak ayarlayarak geri dönebilirsiniz.
'force-static': Statik oluşturmayı zorlayın ve bir düzen veya sayfanın verilerini önbelleğe alın cookies(), headers() ve useSearchParams() boş değerler döndürmek için.

Bildiğim iyi oldu:

getServerSideProps ve getStaticProps adreslerinden dynamic: 'force-dynamic' ve dynamic: 'error' adreslerine nasıl geçiş yapılacağına ilişkin talimatlar yükseltme kılavuzunda bulunabilir.

`dynamicParams`

generateStaticParams ile oluşturulmamış bir dinamik segment ziyaret edildiğinde ne olacağını kontrol edin.

layout.tsx | page.tsx

export const dynamicParams = true // true | false,

true (varsayılan): generateStaticParams adresinde yer almayan dinamik segmentler talep üzerine oluşturulur.
false: generateStaticParams adresinde yer almayan dinamik segmentler 404 döndürür.

Bildiğim iyi oldu:

Bu seçenek, pages dizinindeki getStaticPaths adresinin fallback: true | false | blocking seçeneğinin yerini alır.

dynamicParams = true olduğunda, segment Akış Sunucusu Oluşturma özelliğini kullanır.

Eğer dynamic = 'error' ve dynamic = 'force-static' kullanılıyorsa, dynamicParams varsayılan değerini false olarak değiştirecektir.

`revalidate`

Bir düzen veya sayfa için varsayılan yeniden doğrulama süresini ayarlayın. Bu seçenek, bireysel fetch istekleri tarafından belirlenen revalidate değerini geçersiz kılmaz.

layout.tsx | page.tsx | route.ts

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

false: (varsayılan) cache seçeneğini 'force-cache' olarak ayarlayan veya dinamik bir işlev kullanılmadan önce keşfedilen tüm fetch isteklerini önbelleğe almak için varsayılan sezgisel. Anlamsal olarak revalidate: Infinity ile eşdeğerdir ve kaynağın süresiz olarak önbelleğe alınması gerektiği anlamına gelir. Bireysel fetch isteklerinin önbelleğe alınmamak ve rotayı dinamik olarak oluşturmak için cache: 'no-store' veya revalidate: 0 kullanması hala mümkündür. Veya bir rotanın yeniden doğrulama sıklığını artırmak için revalidate adresini rota varsayılanından daha düşük bir pozitif sayıya ayarlayın.
0: Dinamik işlevler veya önbelleğe alınmamış veri getirmeleri keşfedilmese bile bir düzen veya sayfanın her zaman dinamik olarak oluşturulmasını sağlayın. Bu seçenek, bir cache seçeneği belirlemeyen fetch isteklerinin varsayılanını 'no-store' olarak değiştirir, ancak 'force-cache' seçeneğini tercih eden veya pozitif bir revalidate kullanan fetch isteklerini olduğu gibi bırakır.
number: (saniye cinsinden) Bir düzen veya sayfanın varsayılan yeniden doğrulama sıklığını n saniye olarak ayarlayın.

Bilmekte fayda var: revalidate seçeneği yalnızca Node.js Runtime kullanıldığında kullanılabilir. Bu, revalidate seçeneğini runtime = 'edge' ile kullanmanın işe yaramayacağı anlamına gelir.

Revalidation Frequency

Tek bir rotanın her bir düzen ve sayfasındaki en düşük revalidate, tüm rotanın yeniden doğrulama sıklığını belirleyecektir. Bu, alt sayfaların ana düzenleri kadar sık yeniden doğrulanmasını sağlar.
Bireysel fetch istekleri, tüm rotanın yeniden doğrulama sıklığını artırmak için rotanın varsayılan revalidate adresinden daha düşük bir revalidate adresi belirleyebilir. Bu, bazı kriterlere dayalı olarak belirli rotalar için daha sık yeniden doğrulamayı dinamik olarak tercih etmenize olanak tanır.

`fetchCache`

This is an advanced option that should only be used if you specifically need to override the default behavior.

Varsayılan olarak Next.js, herhangi bir dinamik işlev kullanılmadan önce erişilebilen fetch() isteklerini önbelleğe alır ve dinamik işlevler kullanıldıktan sonra keşfedilen fetch isteklerini önbelleğe almaz.

fetchCache bir düzen veya sayfadaki tüm fetch isteklerinin varsayılan cache seçeneğini geçersiz kılmanıza olanak tanır.

layout.tsx | page.tsx | route.ts

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

'auto' (varsayılan)- Sağladıkları cache seçeneği ile dinamik işlevlerden önce fetch isteklerini önbelleğe almak ve dinamik işlevlerden sonra fetch isteklerini önbelleğe almamak için varsayılan seçenek.
'default-cache': Herhangi bir cache seçeneğinin fetch adresine aktarılmasına izin verin, ancak herhangi bir seçenek belirtilmezse cache seçeneğini 'force-cache' olarak ayarlayın. Bu, dinamik işlevlerden sonraki fetch isteklerinin bile statik olarak kabul edileceği anlamına gelir.
'only-cache': Herhangi bir seçenek sağlanmamışsa varsayılanı cache: 'force-cache' olarak değiştirerek ve herhangi bir fetch isteği cache: 'no-store' kullanıyorsa bir hataya neden olarak tüm fetch isteklerinin önbelleğe almayı tercih etmesini sağlayın.
'force-cache': Tüm fetch isteklerinin cache seçeneğini 'force-cache' olarak ayarlayarak tüm fetch isteklerinin önbelleğe almayı tercih ettiğinden emin olun.
'default-no-store': Herhangi bir cache seçeneğinin fetch adresine aktarılmasına izin verin, ancak herhangi bir seçenek belirtilmezse cache seçeneğini 'no-store' olarak ayarlayın. Bu, dinamik işlevlerden önceki fetch isteklerinin bile dinamik olarak kabul edileceği anlamına gelir.
'only-no-store': Herhangi bir seçenek sağlanmamışsa varsayılanı cache: 'no-store' olarak değiştirerek ve herhangi bir fetch isteği kullanırsa bir hataya neden olarak tüm fetch isteklerinin önbelleğe alma işleminden çıkmasını sağlayın cache: 'force-cache'
'force-no-store': Tüm fetch isteklerinin cache seçeneğini 'no-store' olarak ayarlayarak tüm fetch isteklerinin önbelleklemeden çıkmasını sağlayın. Bu, 'force-cache' seçeneği sağlasalar bile tüm fetch isteklerini her istekte yeniden önbelleklenmeye zorlar.

Cross-route segment behavior

Tek bir rotanın her düzeninde ve sayfasında ayarlanan tüm seçeneklerin birbiriyle uyumlu olması gerekir.
- Hem 'only-cache' hem de 'force-cache' sağlanmışsa, 'force-cache' kazanır. Hem 'only-no-store' hem de 'force-no-store' sağlanmışsa, 'force-no-store' kazanır. Force seçeneği rota boyunca davranışı değiştirir, böylece 'force-*' ile tek bir segment 'only-*' tarafından neden olunan herhangi bir hatayı önleyecektir.
- 'only-*' ve force-*' seçeneklerinin amacı, tüm rotanın ya tamamen statik ya da tamamen dinamik olduğunu garanti etmektir. Bu şu anlama gelir:
  - Tek bir rotada 'only-cache' ve 'only-no-store' kombinasyonuna izin verilmez.
  - Tek bir rotada 'force-cache' ve 'force-no-store' kombinasyonuna izin verilmez.
- Bir ebeveyn, bir çocuk 'auto' veya '*-cache' sağlıyorsa 'default-no-store' sağlayamaz, çünkü bu aynı getirmenin farklı bir davranışa sahip olmasına neden olabilir.
Genellikle paylaşılan ana düzenlerin 'auto' olarak bırakılması ve alt bölümlerin farklılaştığı yerlerde seçeneklerin özelleştirilmesi önerilir.

`runtime`

layout.tsx | page.tsx | route.ts

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

nodejs (varsayılan)
edge

Edge ve Node.js çalışma zamanları hakkında daha fazla bilgi edinin.

`preferredRegion`

layout.tsx | page.tsx | route.ts

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

preferredRegion desteği ve desteklenen bölgeler dağıtım platformunuza bağlıdır.

Bildiğim iyi oldu:

Bir preferredRegion belirtilmezse, en yakın üst düzenin seçeneğini devralır.

Kök düzeni varsayılan olarak all bölgelerine ayarlıdır.

`maxDuration`

Next.js varsayılan olarak sunucu tarafı mantığının yürütülmesini sınırlamaz (bir sayfa oluşturma veya bir API'yi işleme). Dağıtım platformları, belirli yürütme sınırları eklemek için Next.js derleme çıktısından maxDuration adresini kullanabilir. Örneğin, Vercel'de .

Not: Bu ayarlar Next.js 13.4.10 veya üstünü gerektirir.

layout.tsx | page.tsx | route.ts

export const maxDuration = 5

`generateStaticParams`

generateStaticParams fonksiyonu dinamik rota segmentleri ile birlikte, istek zamanında isteğe bağlı olarak değil, derleme zamanında statik olarak oluşturulacak rota segmenti parametrelerinin listesini tanımlamak için kullanılabilir.

Daha fazla ayrıntı için API referansına bakın.