Layouts trong Next.js App Router là gì?

Layout là UI chia sẻ giữa nhiều pages, preserve state khi navigate (không remount). layout.tsx nhận children prop.

• Nested layouts: layout lồng trong layout tạo hierarchy.
• Root layout (app/layout.tsx) bắt buộc phải có, wrap toàn app.
• Khác với template.tsx: template remount mỗi navigate.

A layout is shared UI that wraps multiple pages and preserves its state across navigations (it does not remount). layout.tsx receives a children prop.

• Layouts can be nested to create a hierarchy.
• The root layout (app/layout.tsx) is required and wraps the entire app.
• Unlike layout.tsx, template.tsx remounts on every navigation.