Массив сегментов в динамическом роуте в NextJS

При необходимости можно получить массив всех сегментов в одну переменную. Для этого параметр берется в квадратные скобки, а перед именем параметра ставится троеточие. Давайте посмотрим на примере.

Пусть у нас есть маршрут следующего вида: /prod/:category/:name/:id/, где отмеченные двоеточием параметры являются динамическими. Давайте получим массив значений этих параметров в какую-нибудь переменную. Название этой переменной может быть любым. К примеру, назовем ее slugs.

Сделаем следующую файловую структуру:

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

Сделаем соответствующий компонент:

export default function Prod({ params }) {
	console.log(params); // массив значений
}

Сделайте роут, обрабатывающий адреса вида /prod/:category/:name.

Пусть дан следующий массив:

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

Сделайте так, чтобы в зависимости от значения параметров в верстке компонента выводился соответствующий продукт.