Vargu i segmenteve në rrugëzimin dinamik në NextJS

Nëse është e nevojshme, mund të merrni të gjithë segmentet në një variabël. Për këtë, parametri merret në kllapa katrore, dhe para emrit të parametrit vendoset pikëpresje. Le ta shohim me një shembull.

Le të themi se kemi një rrugë të formës së mëposhtme: /prod/:category/:name/:id/, ku parametrat e shënuar me dy pika janë dinamikë. Le të marrim vargun e vlerave të këtyre parametrave në ndonjë variabël. Emri i kësaj variable mund të jetë çfarëdo. Për shembull, le ta quajmë atë slugs.

Le të krijojmë strukturën e mëposhtme të skedarëve:

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

Le të krijojmë komponentin përkatës:

export default function Prod({ params }) {
	console.log(params); // varg i vlerave
}

Krijoni një rrugë që përpunon adresat të formës /prod/:category/:name.

Le të jepet vargu i mëposhtëm:

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

Bëni që në varësi të vlerave të parametrave në shabllonin e komponentit të shfaqet produkti përkatës.