Matricea de segmente în ruta dinamică în NextJS

În caz de necesitate, se poate obține o matrice cu toate segmentele într-o singură variabilă. Pentru aceasta, parametrul este pus în paranteze pătrate, iar înaintea numelui parametrului se pune trei puncte. Să analizăm un exemplu.

Să presupunem că avem o rută de următoarea formă: /prod/:category/:name/:id/, unde parametrii marcați cu două puncte sunt dinamici. Să obținem o matrice cu valorile acestor parametri într-o variabilă. Denumirea acestei variabile poate fi oricare. de exemplu, să o numim slugs.

Să creăm următoarea structură de fișiere:

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

Să creăm componenta corespunzătoare:

app/prod/[...slugs]/page.jsxexport default function Prod({ params }) {
  console.log(params); // matricea cu valori
}

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