Tableau de segments dans les routes dynamiques dans NextJS

Si nécessaire, il est possible d'obtenir un tableau de tous les segments dans une seule variable. Pour cela, le paramètre est placé entre crochets, et des points de suspension sont placés avant le nom du paramètre. Regardons un exemple.

Supposons que nous ayons une route de la forme suivante : /prod/:category/:name/:id/, où les paramètres précédés de deux-points sont dynamiques. Récupérons un tableau des valeurs de ces paramètres dans une variable. Le nom de cette variable peut être quelconque. Par exemple, nommons-la slugs.

Créons la structure de fichiers suivante :

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

Créons le composant correspondant :

export default function Prod({ params }) {
	console.log(params); // tableau des valeurs
}

Créez une route qui traite les adresses de la forme /prod/:category/:name.

Soit le tableau suivant :

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

Faites en sorte qu'en fonction des valeurs des paramètres, le produit correspondant soit affiché dans le rendu du composant.