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:

export default function Prod({ params }) {
	console.log(params); // değerler dizisi
}

/prod/:category/:name şeklindeki adresleri işleyen bir rota oluşturun.

Aşağıdaki dizi verilsin:

let 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,
	},
];

Parametrelerin değerine bağlı olarak bileşenin HTML çıktısında ilgili ürünün görüntülenmesini sağlayın.