Matricea de segmente în ruta dinamică în NextJS

În caz de necesitate, se poate obține o matrice cu toate segmentele într-o singură variabilă. Pentru aceasta, parametrul este pus în paranteze pătrate, iar înaintea numelui parametrului se pune trei puncte. Să analizăm un exemplu.

Să presupunem că avem o rută de următoarea formă: /prod/:category/:name/:id/, unde parametrii marcați cu două puncte sunt dinamici. Să obținem o matrice cu valorile acestor parametri într-o variabilă. Denumirea acestei variabile poate fi oricare. de exemplu, să o numim slugs.

Să creăm următoarea structură de fișiere:

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

Să creăm componenta corespunzătoare:

export default function Prod({ params }) {
	console.log(params); // matricea cu valori
}

Creați o rută care procesează adresele de forma /prod/:category/:name.

Să fie dată următoarea matrice:

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

Realizați astfel încât, în funcție de valorile parametrilor, în structura componentei să fie afișat produsul corespunzător.