Matriz de segmentos em rota dinâmica no NextJS

Quando necessário, é possível obter um array com todos os segmentos em uma única variável. Para isso, o parâmetro é colocado entre colchetes, e três pontos são colocados antes do nome do parâmetro. Vamos ver um exemplo.

Suponha que temos uma rota com a seguinte estrutura: /prod/:category/:name/:id/, onde os parâmetros marcados com dois-pontos são dinâmicos. Vamos obter um array com os valores desses parâmetros em alguma variável. O nome dessa variável pode ser qualquer um. Por exemplo, vamos chamá-la de slugs.

Vamos criar a seguinte estrutura de arquivos:

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

Vamos criar o componente correspondente:

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

Crie uma rota que processe URLs do tipo /prod/:category/:name.

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

Faça com que, dependendo dos valores dos parâmetros, o produto correspondente seja renderizado no componente.