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:

export default function Prod({ params }) {
	console.log(params); // pole hodnot
}

Vytvořte routu, která zpracovává adresy tvaru /prod/:category/:name.

Nechť je dán následující pole:

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

Zařiďte, aby se v závislosti na hodnotě parametrů ve verstu komponenty zobrazil odpovídající produkt.