กำลังโหลด...
ABYS Academy1⚡ 0 XP
เข้าสู่ระบบABYS Academyกำลังโหลด...
ต่อจาก App Router มาทวน page.tsx กับ layout.tsx กันต่อ — สองไฟล์นี้ใช้บ่อย ที่สุดตลอดคาบวันนี้
เป้าหมายของ Mission นี้: ทบทวน page.tsx กับ layout.tsx — สองไฟล์หลักที่ใช้ตลอดคอร์ส
flowchart TD
L["layout.tsx (ครอบทุกหน้า)"] --> N["Navbar"]
L --> C["children ← page.tsx ของแต่ละหน้า"]
L --> F["Footer"]
คือเนื้อหาของแต่ละหน้า — เขียนเฉพาะสิ่งที่อยากให้หน้านั้นแสดง
// app/about/page.tsx
export default function AboutPage() {
return <h1>เกี่ยวกับเรา</h1>;
}
คือโครงร่วมที่ครอบทุกหน้า (เช่น Navbar/Footer ที่อยากให้อยู่ทุกหน้า) รับ children มาแสดงตรง
กลาง — ทุกหน้าใน app/ จะถูกครอบด้วย layout.tsx เสมอ
// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="th">
<body>
{/* ใส่ Navbar ตรงนี้ จะขึ้นทุกหน้า */}
{children}
{/* ใส่ Footer ตรงนี้ จะขึ้นทุกหน้า */}
</body>
</html>
);
}
| ไฟล์ | ทำหน้าที่ |
|---|---|
page.tsx |
เนื้อหาเฉพาะหน้านั้นๆ |
layout.tsx |
โครงร่วมที่ครอบทุกหน้า (Navbar/Footer ควรอยู่ที่นี่) |