Matriz de segmentos en ruta dinámica en NextJS

Si es necesario, se puede obtener una matriz de todos los segmentos en una variable. Para ello, el parámetro se coloca entre corchetes y antes del nombre del parámetro se ponen tres puntos. Veamos un ejemplo.

Supongamos que tenemos una ruta de la siguiente forma: /prod/:category/:name/:id/, donde los parámetros marcados con dos puntos son dinámicos. Obtengamos una matriz de valores de estos parámetros en alguna variable. El nombre de esta variable puede ser cualquiera. Por ejemplo, llamémosla slugs.

Hagamos la siguiente estructura de archivos:

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

Hagamos el componente correspondiente:

export default function Prod({ params }) {
	console.log(params); // matriz de valores
}

Crea una ruta que maneje las direcciones de la forma /prod/:category/:name.

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

Haz que dependiendo de los valores de los parámetros, en el maquetado del componente se muestre el producto correspondiente.