Laluan Dinamik dalam NextJS

Dalam NextJS, anda boleh mencipta laluan dinamik. Laluan sedemikian menganggap bahawa sebahagian URL boleh mempunyai nilai sewenang-wenangnya. Sebagai contoh, mari kita ambil alamat /users/1, di mana selain daripada satu boleh menjadi sebarang nombor, yang secara teknikalnya sepadan dengan id pengguna yang ingin kita paparkan.

Dalam kes ini, kita tidak perlu mencipta banyak folder untuk setiap nombor yang mungkin. Cukup untuk mengisytiharkan bahagian alamat ini sebagai dinamik. Dalam kes ini, semua permintaan dalam bentuk ini akan diproses oleh fail umum page.jsx.

Untuk membuat parameter dinamik, nama folder yang sepadan perlu diletakkan dalam kurungan segi empat sama. Dalam kes kami, ia akan menjadi struktur folder berikut:

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

Mari kita buat komponen yang sepadan:

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

Parameter yang kita tetapkan akan disimpan dalam objek khas params. Mari kita paparkan nilai parameter ini:

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

Buat laluan yang memproses alamat berbentuk /city/:name, di mana selain :name boleh menjadi sebarang rentetan.

Buat laluan yang memproses alamat berbentuk /show/:country/:city, di mana selain :country dan :city boleh menjadi sebarang rentetan.

Buat laluan yang memproses alamat berbentuk /post/:id, di mana selain :id boleh menjadi sebarang nombor.

Katakan diberikan tatasusunan berikut:

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

export default function Post() {
	
}

Lakukan supaya bergantung pada nilai parameter id dalam paparan komponen, siaran yang sepadan dipaparkan.

Buat laluan yang memproses alamat berbentuk /prod/:id, di mana selain :id boleh menjadi sebarang nombor.

Katakan diberikan tatasusunan 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() {
	
}

Lakukan supaya bergantung pada nilai parameter id dalam paparan komponen, produk yang sepadan dipaparkan.