Segment-Array in dynamischen Routen in NextJS

Bei Bedarf kann ein Array aller Segmente in einer Variable abgerufen werden. Dazu wird der Parameter in eckige Klammern gesetzt und vor dem Parameternamen werden drei Punkte gesetzt. Schauen wir uns ein Beispiel an.

Nehmen wir an, wir haben eine Route folgender Art: /prod/:category/:name/:id/, wobei die mit Doppelpunkt markierten Parameter dynamisch sind. Lassen Sie uns ein Array der Werte dieser Parameter in eine Variable erhalten. Der Name dieser Variable kann beliebig sein. Nennen wir sie zum Beispiel slugs.

Erstellen wir die folgende Dateistruktur:

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

Erstellen wir die entsprechende Komponente:

export default function Prod({ params }) {
	console.log(params); // Array der Werte
}

Erstellen Sie eine Route, die Adressen der Art /prod/:category/:name verarbeitet.

Gegeben sei das folgende Array:

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

Sorgen Sie dafür, dass abhängig von den Parameterwerten in der Darstellung der Komponente das entsprechende Produkt ausgegeben wird.