Pole segmentů v dynamické routě v NextJS

V případě potřeby lze získat pole všech segmentů do jedné proměnné. K tomu se parametr bere do hranatých závorek a před název parametru se umístí tři tečky. Podívejme se na příklad.

Předpokládejme, že máme routu následujícího tvaru: /prod/:category/:name/:id/, kde parametry označené dvojtečkou jsou dynamické. Získejme pole hodnot těchto parametrů do nějaké proměnné. Název této proměnné může být libovolný. Například ji pojmenujeme slugs.

Vytvořme následující souborovou strukturu:

• /app//prod//[...slugs]/

Vytvořme odpovídající komponentu:

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

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