Dynamic Routes ใน NextJS

ใน NextJS คุณสามารถสร้าง เส้นทางแบบไดนามิก (dynamic routes) ได้ เส้นทางดังกล่าวถือว่า ส่วนหนึ่งของ URL สามารถมีค่าใดก็ได้ ตามต้องการ ตัวอย่างเช่น ที่อยู่ /users/1 ซึ่งแทนที่จะเป็น เลข 1 อาจจะเป็นเลขใดก็ได้ ซึ่งโดยเทคนิคแล้วตรงกับ id ของผู้ใช้ ที่เราต้องการจะแสดง

ในกรณีนี้เราไม่จำเป็นต้องสร้าง โฟลเดอร์จำนวนมากสำหรับแต่ละเลขที่อาจเกิดขึ้นได้ เพียงแค่ประกาศว่าส่วนนี้ ของที่อยู่เป็นแบบไดนามิกก็พอ ในกรณีนี้ คำขอทั้งหมดในรูปแบบนี้จะ ถูกจัดการโดยไฟล์ทั่วไป page.jsx

เพื่อสร้างพารามิเตอร์แบบไดนามิก จำเป็นต้องใส่ชื่อโฟลเดอร์ที่เกี่ยวข้อง ไว้ในเครื่องหมายวงเล็บเหลี่ยม ในกรณีของเราจะเป็น โครงสร้างโฟลเดอร์ดังต่อไปนี้:

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

มาสร้างคอมโพเนนต์ที่เกี่ยวข้องกัน:

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

ในขณะที่พารามิเตอร์ที่เรากำหนดจะ ถูกเก็บไว้ในอ็อบเจ็กต์พิเศษ params มาดูค่าของพารามิเตอร์นี้กัน:

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

สร้าง route ที่จัดการที่อยู่ รูปแบบ /city/:name โดยแทนที่ :name สามารถเป็นสตริงใดก็ได้

สร้าง route ที่จัดการที่อยู่ รูปแบบ /show/:country/:city โดยแทนที่ :country และ :city สามารถเป็นสตริงใดก็ได้

สร้าง route ที่จัดการที่อยู่ รูปแบบ /post/:id โดยแทนที่ :id สามารถเป็นตัวเลขใดก็ได้

ให้มีอาร์เรย์ต่อไปนี้:

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

export default function Post() {
	
}

ทำให้ตามค่า ของพารามิเตอร์ id ในส่วนแสดงผล คอมโพเนนต์ แสดงโพสต์ที่เกี่ยวข้อง

สร้าง route ที่จัดการที่อยู่ รูปแบบ /prod/:id โดยแทนที่ :id สามารถเป็นตัวเลขใดก็ได้

ให้มีอาร์เรย์ต่อไปนี้:

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

export default function Prod() {
	
}

ทำให้ตามค่า ของพารามิเตอร์ id ในส่วนแสดงผล คอมโพเนนต์ แสดงผลิตภัณฑ์ที่เกี่ยวข้อง