Dynamic Routes

Segment adlarını önceden tam olarak bilmediğinizde ve dinamik verilerden rotalar oluşturmak istediğinizde, istek zamanında doldurulan veya derleme zamanında önceden oluşturulan Dinamik Segmentleri kullanabilirsiniz.

Convention

Bir Dinamik Segment, bir klasörün adı köşeli parantez içine alınarak oluşturulabilir: [folderName]. Örneğin, [id] veya [slug].

Dinamik Segmentler params prop olarak şu adrese aktarılır layout, page, routeve generateMetadata fonksiyonlar.

Example

Örneğin, bir blog aşağıdaki rotayı içerebilir: app/blog/[slug]/page.js burada [slug] blog gönderileri için Dinamik Segmenttir.

app/blog/[slug]/page.tsx

export default function Page({ params }: { params: { slug: string } }) {
  return <div>My Post: {params.slug}</div>
}

Route	Example URL	`params`
`app/blog/[slug]/page.js`	`/blog/a`	`{ slug: 'a' }`
`app/blog/[slug]/page.js`	`/blog/b`	`{ slug: 'b' }`
`app/blog/[slug]/page.js`	`/blog/c`	`{ slug: 'c' }`

Segment için paramların nasıl oluşturulacağını öğrenmek için generateStaticParams() sayfasına bakın.

Bilmekte fayda var: Dinamik Segmentler, pages dizinindeki Dinamik Rotalara eşdeğerdir.

Generating Static Params

generateStaticParams fonksiyonu dinamik ro ta segmentleri ile birlikte kullanılarak rotalar istek anında isteğe bağlı olarak oluşturulmak yerine derleme zamanında statik olarak oluşturul abilir.

app/blog/[slug]/page.tsx

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())
 
  return posts.map((post) => ({
    slug: post.slug,
  }))
}

generateStaticParams işlevinin birincil faydası, verileri akıllı bir şekilde almasıdır. İçerik generateStaticParams işlevi içinde bir fetch isteği kullanılarak getirilirse, istekler otomatik olarak memoize edilir. Bu, birden fazla generateStaticParams, Düzen ve Sayfada aynı argümanlara sahip bir fetch isteğinin yalnızca bir kez yapılacağı anlamına gelir, bu da derleme sürelerini azaltır.

pages dizininden geçiş yapıyorsanız geçiş kılavuzunu kullanın.

Daha fazla bilgi ve gelişmiş kullanım durumları için generateStaticParams sunucu işlevi belgelerine bakın.

Catch-all Segments

Dinamik Segmentler, [...folderName] parantezlerinin içine bir üç nokta eklenerek sonraki tüm segmentleri yakalayacak şekilde genişletilebilir.

Örneğin, app/shop/[...slug]/page.js, /shop/clothes ile eşleşecektir, ancak aynı zamanda /shop/clothes/tops, /shop/clothes/tops/t-shirts, vb. ile de eşleşecektir.

Route	Example URL	`params`
`app/shop/[...slug]/page.js`	`/shop/a`	`{ slug: ['a'] }`
`app/shop/[...slug]/page.js`	`/shop/a/b`	`{ slug: ['a', 'b'] }`
`app/shop/[...slug]/page.js`	`/shop/a/b/c`	`{ slug: ['a', 'b', 'c'] }`

Optional Catch-all Segments

Catch-all Segmentleri, parametreyi çift köşeli parantez içine alarak isteğe bağlı hale getirilebilir: [[...folderName]].

Örneğin, app/shop/[[...slug]]/page.js, /shop/clothes, /shop/clothes/tops, /shop/clothes/tops/t-shirts'a ek olarak /shop ile de eşleşecektir.

Tümünü yakala ve isteğe bağlı tümünü yakala segmentleri arasındaki fark, isteğe bağlı olduğunda parametre içermeyen rotanın da eşleştirilmesidir (yukarıdaki örnekte/shop ).

Route	Example URL	`params`
`app/shop/[[...slug]]/page.js`	`/shop`	`{}`
`app/shop/[[...slug]]/page.js`	`/shop/a`	`{ slug: ['a'] }`
`app/shop/[[...slug]]/page.js`	`/shop/a/b`	`{ slug: ['a', 'b'] }`
`app/shop/[[...slug]]/page.js`	`/shop/a/b/c`	`{ slug: ['a', 'b', 'c'] }`

TypeScript

TypeScript kullanırken, yapılandırılmış rota segmentinize bağlı olarak params için türler ekleyebilirsiniz.

app/blog/[slug]/page.tsx

export default function Page({ params }: { params: { slug: string } }) {
  return <h1>My Page</h1>
}

Route	`params` Type Definition
`app/blog/[slug]/page.js`	`{ slug: string }`
`app/shop/[...slug]/page.js`	`{ slug: string[] }`
`app/shop/[[...slug]]/page.js`	`{ slug?: string[] }`
`app/[categoryId]/[itemId]/page.js`	`{ categoryId: string, itemId: string }`

Bilmekte fayda var: Bu, gelecekte TypeScript eklentisi tarafından otomatik olarak yapılabilir.