Định Tuyến Động Trong NextJS

Trong NextJS, bạn có thể tạo các tuyến đường động. Những tuyến đường như vậy giả định rằng một phần của URL có thể có giá trị tùy ý. Ví dụ, lấy địa chỉ /users/1, trong đó thay vì số một có thể là bất kỳ số nào, về mặt kỹ thuật tương ứng với id của người dùng mà chúng ta muốn hiển thị.

Trong trường hợp này, chúng ta không cần tạo nhiều thư mục cho mỗi số có thể có. Chỉ cần khai báo phần này của địa chỉ là động. Khi đó tất cả các yêu cầu dạng này sẽ được xử lý bởi một tệp chung page.jsx.

Để tạo một tham số động, cần đặt tên thư mục tương ứng trong dấu ngoặc vuông. Trong trường hợp của chúng ta, đây sẽ là cấu trúc thư mục sau:

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

Hãy tạo một component tương ứng:

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

Tham số mà chúng ta đặt sẽ được lưu trữ trong một đối tượng đặc biệt params. Hãy hiển thị giá trị của tham số này:

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

Tạo một tuyến đường xử lý các địa chỉ dạng /city/:name, trong đó thay vì :name có thể là bất kỳ chuỗi nào.

Tạo một tuyến đường xử lý các địa chỉ dạng /show/:country/:city, trong đó thay vì :country và :city có thể là bất kỳ chuỗi nào.

Tạo một tuyến đường xử lý các địa chỉ dạng /post/:id, trong đó thay vì :id có thể là bất kỳ số nào.

Giả sử có mảng sau:

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

export default function Post() {
	
}

Hãy làm sao cho tùy thuộc vào giá trị của tham số id trong phần tử component, bài post tương ứng sẽ được hiển thị.

Tạo một tuyến đường xử lý các địa chỉ dạng /prod/:id, trong đó thay vì :id có thể là bất kỳ số nào.

Giả sử có mảng sau:

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

export default function Prod() {
	
}

Hãy làm sao cho tùy thuộc vào giá trị của tham số id trong phần tử component, sản phẩm tương ứng sẽ được hiển thị.