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

Қажет болған жағдайда барлық сегменттердің массивін бір айнымалыға алуға болады. Бұл үшін параметр төртбұрышты жақшаға алынып, ал параметр атының алдына үш нүкте қойылады. Мысал арқылы қарастырайық.

Бізде келесі түрдегі маршрут бар делік: /prod/:category/:name/:id/, мұндағы үтірлермен белгіленген параметрлер динамикалық болып табылады. Бұл параметрлердің мәндерінің массивін қандай да бір айнымалыға алайық. Бұл айнымалының аты кез келген болуы мүмкін. Мысалы, оны slugs деп атайық.

Келесі файлдық құрылымды жасайық:

• /app//prod//[...slugs]/

Сәйкес компонентті жасайық:

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

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