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

При необходимост може да получите масив от всички сегменти в една променлива. За целта параметърът се поставя в квадратни скоби, а преди името на параметъра се поставя многоточие. Нека да разгледаме пример.

Да предположим, че имаме маршрут със следния вид: /prod/:category/:name/:id/, където параметрите, отбелязани с двоеточие, са динамични. Нека да получим масив от стойностите на тези параметри в някаква променлива. Името на тази променлива може да бъде всяко. Например, нека я наречем slugs.

Нека създадем следната файлова структура:

Нека създадем съответния компонент:

app/prod/[...slugs]/page.jsxexport default function Prod({ params }) {
  console.log(params); // масив от стойности
}
Задание 1

Създайте маршрут, който обработва адреси от вида /prod/:category/:name.

Даден е следният масив:

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

Направете така, че в зависимост от стойностите на параметрите във верстката на компонента да се извежда съответният продукт.