เลย์เอาท์แบบซ้อนใน NextJS

ดังที่คุณทราบ ในโฟลเดอร์ /app ในไฟล์ /layout.jsx จะมีเลย์เอาท์หลักของเว็บไซต์

หากต้องการ อย่างไรก็ตาม ในโฟลเดอร์ย่อย สามารถสร้างเลย์เอาท์ของตัวเองได้ ในกรณีนี้ เนื้อหาของเพจจะ ถูกแทรกเข้าไปในเลย์เอาท์ย่อยก่อน จากนั้นผลลัพธ์ที่ได้จะถูกแทรกเข้าไปในเลย์เอาท์หลัก

มาลองทำในทางปฏิบัติกัน สมมติว่าเลย์เอาท์หลักของเรามี ลักษณะดังนี้:

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

มาสร้างเลย์เอาท์ย่อยอีกอันหนึ่ง สำหรับเนื้อหาทั้งหมดจากโฟลเดอร์ /users กัน:

export default function UsersLayout({children}) {
	return (
		<div className="info">
			message for all users
		</div>
		<div className="content">
			{children}
		</div>
	);
}

ดังที่คุณเห็น ในเลย์เอาท์นี้เราไม่ได้ระบุ แท็กหลักของเพจ เพราะมีอยู่แล้วในเลย์เอาท์หลักของเว็บไซต์ของเรา

มาสร้างไฟล์สำหรับแสดงเนื้อหาของผู้ใช้กัน:

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

หลังจากดำเนินการเหล่านี้ โครงสร้างไฟล์ของเรา จะมีลักษณะดังนี้:

/app/
- layout.jsx
- /users/
  - layout.jsx
  - /show/
    - page.jsx

ตอนนี้ หากเข้าถึง URL ที่เกี่ยวข้อง NextJS จะประกอบทุกอย่างเข้าด้วยกัน และในเบราว์เซอร์ เราจะได้โค้ด HTML สุดท้ายดังนี้:

<html lang="en">
	<body>
		<header>
			header
		</header>
		<main>
			<div class="info">
				message for all users
			</div>
			
			<h1>User</h1>
			<p>
				user description
			</p>
		</main>
		<footer>
			footer
		</footer>
	</body>
</html>

สร้างส่วนสำหรับผู้ใช้และส่วนสำหรับโพสต์บนเว็บไซต์ของคุณ สร้างเลย์เอาท์ในแต่ละส่วน ที่จะสืบทอดจากเลย์เอาท์หลักของเว็บไซต์