Массив сегментов в динамическом роуте в NextJS

Қажет болған жағдайда барлық сегменттердің массивін бір айнымалыға алуға болады. Бұл үшін параметр төртбұрышты жақшаға алынып, ал параметр атының алдына үш нүкте қойылады. Мысал арқылы қарастырайық.

Бізде келесі түрдегі маршрут бар делік: /prod/:category/:name/:id/, мұндағы үтірлермен белгіленген параметрлер динамикалық болып табылады. Бұл параметрлердің мәндерінің массивін қандай да бір айнымалыға алайық. Бұл айнымалының аты кез келген болуы мүмкін. Мысалы, оны slugs деп атайық.

Келесі файлдық құрылымды жасайық:

/app/
- /prod/
  - /[...slugs]/

Сәйкес компонентті жасайық:

export default function Prod({ params }) {
	console.log(params); // массив значений
}

/prod/:category/:name түріндегі мекенжайларды өңдейтін роут жасаңыз.

Келесі массив берілген делік:

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

Параметрлердің мәніне байланысты компоненттің версткасында сәйкес өнім шығарылатындай етіп жасаңыз.