เนื้อหาในโครงร่างเว็บไซต์ใน NextJS

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

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

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

นั่นคือในไฟล์ layout.jsx ของเรา เก็บโครงร่างเว็บไซต์ และด้วยความช่วยเหลือของ ตัวแปร children เราระบุ ตำแหน่งในโครงร่างเว็บไซต์ที่ควรจะ แทรกเนื้อหาของหน้า

ตัวอย่างเช่น ลองจัดรูปแบบเนื้อหา ของหน้าในแท็กบางอย่าง:

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

จัดรูปแบบเนื้อหาของคุณ เว็บไซต์ในแท็ก main