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 dosya veya klasör adı köşeli parantez içine alınarak oluşturulabilir: [segmentName]. Örneğin, [id] veya [slug].

Dinamik Segmentlere şuradan erişilebilir useRouter.

Example

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

import { useRouter } from 'next/router'
 
export default function Page() {
  const router = useRouter()
  return <p>Post: {router.query.slug}</p>
}

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

Catch-all Segments

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

Örneğin, pages/shop/[...slug].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`
`pages/shop/[...slug].js`	`/shop/a`	`{ slug: ['a'] }`
`pages/shop/[...slug].js`	`/shop/a/b`	`{ slug: ['a', 'b'] }`
`pages/shop/[...slug].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: [[...segmentName]].

Örneğin, pages/shop/[[...slug]].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`
`pages/shop/[[...slug]].js`	`/shop`	`{ slug: [] }`
`pages/shop/[[...slug]].js`	`/shop/a`	`{ slug: ['a'] }`
`pages/shop/[[...slug]].js`	`/shop/a/b`	`{ slug: ['a', 'b'] }`
`pages/shop/[[...slug]].js`	`/shop/a/b/c`	`{ slug: ['a', 'b', 'c'] }`