Layout trong App Router là gì? – Next.js · Luyện phỏng vấn IT

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

Câu hỏi liên quan