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:

app/prod/[...slugs]/page.jsxexport default function Prod({ params }) {
  console.log(params); // arvojen taulukko
}

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