Rute Dinamis di NextJS

Di NextJS, kita dapat membuat rute dinamis. Rute seperti ini mengasumsikan bahwa sebagian dari URL dapat memiliki nilai yang sembarang. Sebagai contoh, mari kita ambil alamat /users/1, di mana angka 1 dapat diganti dengan angka apa pun, yang secara teknis sesuai dengan id pengguna yang ingin kita tampilkan.

Dalam kasus ini, kita tidak perlu membuat banyak folder untuk setiap angka yang mungkin. Cukup dengan mendeklarasikan bagian alamat ini sebagai dinamis. Dalam hal ini, semua permintaan dengan format seperti itu akan diproses oleh file umum page.jsx.

Untuk membuat parameter dinamis, nama folder yang sesuai perlu ditempatkan dalam tanda kurung siku. Dalam kasus kita, struktur foldernya akan menjadi seperti ini:

/app/
- /users/
  - /[id]/

Mari kita buat komponen yang sesuai:

export default function User() {
	return <p>
		user
	</p>;
}

Parameter yang kita tentukan akan disimpan dalam objek khusus params. Mari kita tampilkan nilai parameter ini:

export default function User({ params }) {
	return <p>
		user {params.id}
	</p>;
}

Buatlah rute yang menangani alamat berformat /city/:name, di mana :name dapat diganti dengan string apa pun.

Buatlah rute yang menangani alamat berformat /show/:country/:city, di mana :country dan :city dapat diganti dengan string apa pun.

Buatlah rute yang menangani alamat berformat /post/:id, di mana :id dapat diganti dengan angka apa pun.

Misalkan terdapat array berikut:

let posts = [
	'post1',
	'post2',
	'post3',
	'post4',
	'post5',
];

export default function Post() {
	
}

Buatlah agar tergantung pada nilai parameter id, pada markup komponen akan ditampilkan postingan yang sesuai.

Buatlah rute yang menangani alamat berformat /prod/:id, di mana :id dapat diganti dengan angka apa pun.

Misalkan terdapat array berikut:

let prods = [
	{
		id: 1,
		name: 'prod1',
		cost: 100,
	},
	{
		id: 2,
		name: 'prod2',
		cost: 200,
	},
	{
		id: 3,
		name: 'prod3',
		cost: 300,
	},
];

export default function Prod() {
	
}

Buatlah agar tergantung pada nilai parameter id, pada markup komponen akan ditampilkan produk yang sesuai.