NextJS'te Dinamik Rotede Segment Dizisi

Gerektiğinde, tüm segmentleri bir değişkende almak mümkündür. Bunun için parametre köşeli parantez içine alınır ve parametre adından önce üç nokta konur. Bir örnekle inceleyelim.

Aşağıdaki gibi bir rotamız olduğunu varsayalım: /prod/:category/:name/:id/, iki nokta üst üste ile işaretlenmiş parametrelerin dinamik olduğu bir rota. Bu parametrelerin değerlerini bir dizi olarak bir değişkende alalım. Bu değişkenin adı herhangi bir şey olabilir. Örneğin, ona slugs adını verelim.

Aşağıdaki dosya yapısını oluşturalım:

• /app//prod//[...slugs]/

İlgili bileşeni oluşturalım:

app/prod/[...slugs]/page.jsxexport default function Prod({ params }) {
  console.log(params); // değerler dizisi
}

page.jsxlet prods = [
  {
    category: 'catg1',
    name: 'prod1',
    cost: 100,
  },
  {
    category: 'catg1',
    name: 'prod2',
    cost: 200,
  },
  {
    category: 'catg2',
    name: 'prod1',
    cost: 300,
  },
  {
    category: 'catg2',
    name: 'prod3',
    cost: 400,
  },
];