Segmendimassiiv dünaamilises ruudis NextJS-is

Vajadusel on võimalik saada massiiv kõikidest segmentidest ühte muutujasse. Selleks võetakse parameeter nurksulgudesse ja parameetri nime ette pannakse kolm punkti. Vaatame seda näite varal.

Olgem meil järgmise kujuga marsruut: /prod/:category/:name/:id/, kus kooloniga märgitud parameetrid on dünaamilised. Saagem nende parameetrite väärtuste massiivi mõnda muutujasse. Selle muutuja nimi võib olla suvaline. Näiteks nimetame selle slugs.

Teeme järgmise failistruktuuri:

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

Teeme vastava komponendi:

export default function Prod({ params }) {
	console.log(params); // väärtuste massiiv
}

Tehke marsruut, mis töötleb aadresse kujul /prod/:category/:name.

Olgu antud järgmine massiiv:

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

Tehke nii, et sõltuvalt parameetrite väärtustest komponendi visandis kuvataks vastav toode.