Parallel Routing ใน NextJS

ใน NextJS สามารถทําให้ ส่วนหนึ่งของเว็บไซต์แสดงเนื้อหาที่ต่างกัน ขึ้นอยู่กับ URL ที่ร้องขอ นี้เรียกว่า Parallel Routing

ลองดูตัวอย่าง สมมติว่าเรามี Layout ของเว็บไซต์ดังต่อไปนี้:

export default function RootLayout({children}) {
	return (
		<html lang="en">
			<body>
				<header>
					header
				</header>
				<main>
					{children}
				</main>
				<footer>
					footer
				</footer>
			</body>
		</html>
	);
}

สมมติว่าเราต้องการให้ในส่วน header แสดงข้อมูลแบบไดนามิก สมมติว่าเมื่อ URL เป็น /users จะแสดง คอมโพเนนต์เกี่ยวกับผู้ใช้ และเมื่อ URL /posts เป็นคอมโพเนนต์เกี่ยวกับโพสต์

สำหรับ Parallel Routing แบบนี้ จำเป็นต้องสร้างโฟลเดอร์พิเศษ โดยเริ่มชื่อด้วยสัญลักษณ์ @ สำหรับตัวอย่างนี้เราจะตั้งชื่อโฟลเดอร์ของเราเป็น @info

ในโฟลเดอร์นี้ เราจะวางสองคอมโพเนนต์ อันแรกสำหรับแสดงผู้ใช้ในโฟลเดอร์ /users/ และอันที่สองสำหรับแสดงโพสต์ในโฟลเดอร์ /posts/ โครงสร้างไฟล์ของเราจะได้ดังนี้:

/app/
- /@info/
  - /users/
    - page.jsx
  - /posts/
    - page.jsx

ตอนนี้ใน Layout ของเว็บไซต์ เราต้องเขียนคำสั่งพิเศษ สำหรับการแทรก สำหรับสิ่งนี้จำเป็นต้อง ใช้ Dynamic Slot

เพื่อให้เข้าใจว่ามันคืออะไร ก่อนอื่นให้ดู ที่พารามิเตอร์ของฟังก์ชัน Layout ของเรา:

export default function RootLayout({children}) {
	return (
		
	);
}

โปรดสังเกตว่าพารามิเตอร์ ที่ส่งเข้ามาเป็นออบเจ็กต์ ซึ่ง เราแยกเนื้อหาของเว็บไซต์ออกมาเก็บในตัวแปร children

ในออบเจ็กต์นี้อาจมีคีย์อื่นๆ ได้ คีย์เหล่านี้สอดคล้องกับโฟลเดอร์ที่ ชื่อของเราเริ่มต้นด้วย @

ในกรณีของเรามีโฟลเดอร์ @info นั่นหมายความว่าเราจะสามารถเข้าถึง ตัวแปร info ได้ ซึ่งขึ้นอยู่ กับ URL จะมีเนื้อหาของหนึ่งใน คอมโพเนนต์ - ผู้ใช้หรือโพสต์ เราจะรับตัวแปรนี้:

export default function RootLayout({children, info}) {
	return (
		
	);
}

ตอนนี้ภายในโครงสร้าง Markup ของ Layout เราสามารถ แสดงตัวแปร info ในตำแหน่งนี้ ขึ้นอยู่กับ URL ข้อความของคอมโพเนนต์หนึ่งในสองของเราจะถูกแทรกเข้ามา:

export default function RootLayout({children, info}) {
	return (
		<html lang="en">
			<body>
				<header>
					<div>
						{info}
					</div>
				</header>
				<main>
					{children}
				</main>
				<footer>
					footer
				</footer>
			</body>
		</html>
	);
}

สร้าง Dynamic Slot สำหรับ Sidebar ด้านขวา

สร้าง Dynamic Slot สำหรับ Sidebar ด้านซ้าย