เลย์เอาต์ คือ UI ที่แชร์กัน ซึ่งห่อหลายหน้า และยังคงอยู่ระหว่างการนำทาง — มันไม่ได้เรนเดอร์ใหม่หรือสูญเสียสถานะเมื่อคุณเลื่อนไปมาระหว่างเส้นทางของชาย ลูก คุณกำหนดอันหนึ่งโดยใช้ไฟล์ layout.tsx
เลย์เอาต์รูท (จำเป็น)
() {
(
);
}
แอป App Router ทุกตัวต้องมีเลย์เอาต์รูท — มันแทนที่ _app.tsx/_document.tsx เก่า
เลย์เอาต์ซ้อนกันตามโครงสร้างโฟลเดอร์ ดังนั้นแต่ละส่วนสามารถเพิ่มการห่อที่ยังคงอยู่ของตัวเอง:
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
// 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>
);
}
เมื่อคุณนำทางจาก /dashboard/settings ไปยัง /dashboard/billing เลย์เอาต์แดชบอร์ด (และ <Sidebar> ของมัน) ยังคงติดตั้งอยู่ — สถานะของมัน (ตำแหน่งการเลื่อน เมนูเปิด อินพุตแบบฟอร์ม) จะถูกรักษาไว้ และเฉพาะเนื้อหาหน้าเท่านั้นที่สลับ นี่มีประสิทธิภาพมากขึ้นและให้ UX ที่ราบรื่นกว่าการเรนเดอร์เปลือกทั้งหมดใหม่
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
ใช้ template.tsx แทน layout.tsx ในกรณีที่หายากเมื่อคุณ ต้องการ ให้ตัวห่อรีเซ็ตต่อการนำทาง
เลย์เอาต์คือวิธีที่ App Router สร้างแบบจำลอง UI ที่แชร์กันและยั่งยืน (ส่วนหัว แถบข้างตัวจริง นำทาง) ในระดับใดก็ได้ของต้นไม้เส้นทาง
การยังคงอยู่ของพวกเขาระหว่างการนำทาง — การรักษาสถานะและหลีกเลี่ยงการเรนเดอร์เปลือกใหม่ — เป็นข้อได้เปรียบหลักของแอป Router และเลย์เอาต์ที่ซ้อนกันอนุญาตให้แต่ละส่วนประกอบโครงสร้างของตัวเองอย่างสะอาด