Array di segmenti nella rotta dinamica in NextJS

Se necessario, è possibile ottenere un array di tutti i segmenti in una singola variabile. Per fare ciò, il parametro viene racchiuso tra parentesi quadre, e prima del nome del parametro viene inserito un puntini di sospensione. Diamo un'occhiata a un esempio.

Supponiamo di avere una rotta della forma seguente: /prod/:category/:name/:id/, dove i parametri preceduti dai due punti sono dinamici. Otteniamo un array dei valori di questi parametri in una variabile. Il nome di questa variabile può essere qualsiasi. Ad esempio, chiamiamola slugs.

Creiamo la seguente struttura di file:

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

Creiamo il componente corrispondente:

export default function Prod({ params }) {
	console.log(params); // array di valori
}

Crea una rotta che gestisca gli indirizzi della forma /prod/:category/:name.

Supponiamo di avere il seguente array:

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

Fai in modo che, in base ai valori dei parametri, nel markup del componente venga visualizzato il prodotto corrispondente.