ส่วนต่างๆ ของเว็บไซต์ในเลย์เอาต์หลักใน NextJS

ลองดูที่เลย์เอาต์เว็บไซต์ของเรา ตอนนี้มีการระบุคำสั่งสำหรับแทรก เนื้อหาหน้าที่เปลี่ยนแปลงได้:

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

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

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

เพิ่มบล็อกส่วนหัว, ส่วนท้าย และแถบด้านข้างขวาและซ้าย ลงในเลย์เอาต์โปรเจกต์ของคุณ