เลย์เอาต์ในแอป Router คืออะไร – Next.js · ฝึกสัมภาษณ์งาน IT

เลย์เอาต์ในแอป Router คืออะไร

เลย์เอาต์ คือ UI ที่แชร์กัน ซึ่งห่อหลายหน้า และยังคงอยู่ระหว่างการนำทาง — มันไม่ได้เรนเดอร์ใหม่หรือสูญเสียสถานะเมื่อคุณเลื่อนไปมาระหว่างเส้นทางของชาย ลูก คุณกำหนดอันหนึ่งโดยใช้ไฟล์ layout.tsx

เลย์เอาต์รูท (จำเป็น)

tsx


   () {
   (
    
  );
}

text

app/layout.tsx                 → wraps everything (header/footer)
app/dashboard/layout.tsx       → wraps all /dashboard/* pages (adds a sidebar)
app/dashboard/settings/page.tsx → rendered inside BOTH layouts

tsx

// app/dashboard/layout.tsx — only wraps dashboard routes
export default function DashboardLayout({ children }) {
  return (
    <div className="flex">
      <Sidebar />          {/* stays mounted as you move within /dashboard */}
      <main>{children}</main>
    </div>
  );
}

เลย์เอาต์ในแอป Router คืออะไร

เลย์เอาต์รูท (จำเป็น)

เลย์เอาต์ที่ซ้อนกัน

เหตุใดการบอกรักษาจึงมีความสำคัญ

เลย์เอาต์กับเทมเพลต

เหตุใดจึงสำคัญ