Next.js Roadmap • Week 1 Day 2

Nested
Layouts.

เจาะลึกสถาปัตยกรรมการวางโครงสร้าง UI ผ่านระบบไฟล์ การทำงานร่วมกันของ layout.tsx และ page.tsx

Layouts

layout.tsx

Wrapper
  • State Preserved: ไม่ถูก Re-render เมื่อเปลี่ยนหน้า (รักษา State ไว้)
  • ใช้ห่อหุ้ม UI ที่แชร์ร่วมกัน เช่น Navbar, Sidebar
  • ต้องรับ children เป็น Prop เสมอ

Pages

page.tsx

Content
  • แสดงผลเนื้อหาเฉพาะของแต่ละ Route
  • เป็นไฟล์ที่ทำให้ Route นั้นสามารถเข้าถึงได้ (Publicly accessible)
  • จะถูกนำไปแทรกตรงตำแหน่ง children ของ Layout เสมอ

Visualizing Nested Hierarchy

Layout ใน Next.js สามารถซ้อนกันได้ตามโครงสร้างโฟลเดอร์ (Nested Layouts)

app/layout.tsx (Root)
Global Navigation
app/dashboard/layout.tsx
Sidebar
app/dashboard/page.tsx

Dashboard Content

Footer Area

The children Prop

หัวใจสำคัญของการทำ Layout คือการรับและแสดงผล children ซึ่ง Next.js จะจัดการนำ Layout ลูก หรือ Page มาแทรกไว้ในตำแหน่งนี้โดยอัตโนมัติ

app/dashboard/layout.tsx
export default function DashboardLayout({
  children, // รับ children เข้ามาเป็น Prop
}: {
  children: React.ReactNode;
}) {
  return (
    <section className="flex h-screen">
      <Sidebar />
      <main className="flex-1 p-8">
        {children} <!-- เนื้อหาของ Page จะถูกแทรกที่นี่ -->
      </main>
    </section>
  );
}
State Sharing in Layouts

หากมีการใช้ Client Component ภายใน Layout ตัว State (เช่น input text หรือ toggle sidebar) จะไม่ถูกรีเซ็ต เมื่อผู้ใช้เปลี่ยนหน้า (Navigate) ไปมาระหว่าง Page ที่อยู่ใต้ Layout เดียวกัน