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.
Bir Dinamik Segment, bir klasörün adını köşeli parantezler içine alarak oluşturulabilir: [folderName]
. Örneğin, [id]
veya [slug]
.
Dinamik Segmentler layout
, page
, route
ve generateMetadata
fonksiyonlarına params
prop olarak aktarılır.
Örneğin, bir blog aşağıdaki app/blog/[slug]/page.js
rotasını içerebilir; burada [slug]
blog gönderileri için Dinamik Segmenttir.
export default function Page({ params }: { params: { slug: string } }) {
return <div>My Post: {params.slug}</div>;
}
Rota | Örnek 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']} |
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
'e 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.
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/[categoryId]/[itemId]/page.js |
{ categoryId: string, itemId: string } |