Segmentarray i dynamisk routing i NextJS

Vid behov kan man få en array med alla segment i en variabel. För att göra detta sätts parametern inom hakparenteser, och tre punkter sätts före parameternamnet. Låt oss titta på ett exempel.

Låt oss säga att vi har en rutt av följande typ: /prod/:category/:name/:id/, där parametrarna markerade med kolon är dynamiska. Låt oss få en array med värdena för dessa parametrar i valfri variabel. Namnet på denna variabel kan vara vilket som helst. Till exempel, låt oss kalla den slugs.

Låt oss skapa följande filstruktur:

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

Låt oss skapa motsvarande komponent:

export default function Prod({ params }) {
	console.log(params); // array med värden
}

Skapa en rutt som hanterar adresser av typen /prod/:category/:name.

Antag att följande array ges:

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

Gör så att beroende på parametrarnas värden renderas motsvarande produkt i komponenten.