Segmenttitaulukko dynaamisessa reitityksessä NextJS:ssä

Tarvittaessa voidaan saada taulukko kaikista segmenteistä yhteen muuttujaan. Tätä varten parametri otetaan hakasulkeisiin, ja parametrin nimen eteen asetetaan kolme pistettä. Katsotaanpa esimerkkiä.

Olkoon meillä seuraavanlainen reitti: /prod/:category/:name/:id/, missä kaksoispisteellä merkityt parametrit ovat dynaamisia. Saadaan kaikkien näiden parametrien arvojen taulukko johonkin muuttujaan. Tämän muuttujan nimi voi olla mikä tahansa. Esimerkiksi nimetään se slugs.

Tehdään seuraava tiedostorakenne:

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

Tehdään vastaava komponentti:

export default function Prod({ params }) {
	console.log(params); // arvojen taulukko
}

Tee reitti, joka käsittelee osoitteita muotoa /prod/:category/:name.

Olkoon annettu seuraava taulukko:

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

Tee niin, että parametrien arvoista riippuen komponentin renderöinnissä näytetään vastaava tuote.