Array di segmenti nella rotta dinamica in NextJS

Se necessario, è possibile ottenere un array di tutti i segmenti in una singola variabile. Per fare ciò, il parametro viene racchiuso tra parentesi quadre, e prima del nome del parametro viene inserito un puntini di sospensione. Diamo un'occhiata a un esempio.

Supponiamo di avere una rotta della forma seguente: /prod/:category/:name/:id/, dove i parametri preceduti dai due punti sono dinamici. Otteniamo un array dei valori di questi parametri in una variabile. Il nome di questa variabile può essere qualsiasi. Ad esempio, chiamiamola slugs.

Creiamo la seguente struttura di file:

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

Creiamo il componente corrispondente:

app/prod/[...slugs]/page.jsxexport default function Prod({ params }) {
  console.log(params); // array di 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,
  },
];