ส่วนต่างๆ ของเว็บไซต์ในคอมโพเนนต์ใน NextJS

ในบทเรียนที่แล้ว เราเขียนข้อความ ของส่วนต่างๆ ของเว็บไซต์ ลงในไฟล์เลย์เอาต์โดยตรง:

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

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

ลองมาแยกเฮดเดอร์ของเว็บไซต์ เป็นคอมโพเนนต์แยกกัน สร้างไฟล์ที่เกี่ยวข้อง:

export default function Header() {
	return <>
		header
	</>;
}

นำเข้าคอมโพเนนต์ของเราในไฟล์เลย์เอาต์:

import Header from '@/comp/header/header.jsx';

export default function RootLayout({children}) {
	
}

แสดงข้อความของคอมโพเนนต์ของเรา โดยใช้แท็กที่มีชื่อของมัน:

import Header from '@/comp/header/header.jsx';

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

สร้างคอมโพเนนต์แยก สำหรับเฮดเดอร์และฟุตเตอร์ของเว็บไซต์