Bố cục gốc

Ứng dụng nào cũng có những phần không bao giờ thay đổi: khung trang, đầu trang, chân trang. Trong Next.js, những phần đó nằm trong bố cục (layout), và bố cục ngoài cùng được gọi là bố cục gốc (root layout).

Đó chính là tệp luôn được mở trước mắt bạn:

// app/layout.jsx
export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}

Có ba điểm khiến nó khác với một trang:

• Nó bắt buộc phải có và là tệp duy nhất kết xuất <html> và <body>
• Nó nhận children, tức là trang mà URL khớp với. Nếu quên kết xuất {children}, ứng dụng của bạn sẽ chỉ hiển thị phần khung.
• Nó bao bọc mọi tuyến đường trong ứng dụng mà không cần trang nào nhập nó

Nó vẫn được giữ lại

Đây là điều khiến nhiều người bất ngờ. Khi người dùng chuyển từ / sang /menu, layout không được tạo lại. Next.js thay trang bên trong layout và giữ nguyên layout.

Nhờ vậy, phần đầu trang dùng chung không nhấp nháy, video trong thanh bên vẫn phát và mọi trạng thái trong bố cục được giữ nguyên khi chuyển trang: menu đang mở vẫn mở, vị trí cuộn vẫn giữ nguyên. Bố cục là một khung tồn tại lâu dài; các trang lần lượt xuất hiện rồi biến mất bên trong.

Một hệ quả đáng nhớ: vì layout không chạy lại khi điều hướng, nên nó không thể đọc searchParams của trang hiện tại. Nó không theo dõi thay đổi đó.