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:

export default function Prod({ params }) {
	console.log(params); // array nilai
}

Buatlah rute yang menangani alamat berbentuk /prod/:category/:name.

Misalkan terdapat array berikut:

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

Buatlah agar tergantung pada nilai parameter di dalam komponen, produk yang sesuai ditampilkan.