Layout trong App Router là gì?

Một layout là UI dùng chung bao bọc nhiều trang và tồn tại bền vững qua các lần điều hướng — nó không render lại hay mất state khi bạn di chuyển giữa các route con. Bạn định nghĩa nó bằng một file layout.tsx.

Root layout (bắt buộc)

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 — chỉ bao bọc các route dashboard
export default function DashboardLayout({ children }) {
  return (
    <div className="flex">
      <Sidebar />          {/* vẫn mounted khi bạn di chuyển trong /dashboard */}
      <main>{children}</main>
    </div>
  );
}

Layout trong App Router là gì?

Root layout (bắt buộc)

Nested layouts

Tại sao tính bền vững quan trọng

Layout so với template

Tại sao điều này quan trọng