Դինամիկ երթուղու հատվածների զանգված 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,
	},
];

Կարգավորեք այնպես, որ պարամետրերի արժեքների համաձայն կոմպոնենտի վերտում ցուցադրվի համապատասխան արտադրանքը։