Array Segmen dalam Dynamic Route di NextJS

Jika diperlukan, Anda bisa mendapatkan array semua segmen ke dalam satu variabel. Untuk melakukan ini, parameter ditempatkan dalam tanda kurung siku, dan elipsis ditempatkan sebelum nama parameter. Mari kita lihat contohnya.

Misalkan kita memiliki rute dengan bentuk berikut: /prod/:category/:name/:id/, di mana parameter yang ditandai dengan titik dua adalah dinamis. Mari kita dapatkan array nilai parameter-parameter tersebut ke dalam suatu variabel. Nama variabel ini bisa apa saja. Misalnya, kita beri nama slugs.

Mari kita buat struktur file berikut:

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

Mari buat komponen yang sesuai:

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

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