Bố cục lồng nhau

Thuộc phần Kiến thức thiết yếu về Next.js trong hành trình React của Coddy. Bài học 13 trên 47.

Bố cục gốc không phải là bố cục duy nhất. Thêm một layout.jsx vào bất kỳ thư mục nào, bố cục đó sẽ bao bọc các route của thư mục ấy và chỉ các route đó.

app/
    layout.jsx          wraps EVERYTHING
    page.jsx            /
    menu/
        layout.jsx      wraps /menu and everything under it
        page.jsx        /menu
        pizza/
            page.jsx    /menu/pizza

Truy cập /menu/pizza và Next.js lồng chúng theo thứ tự từ ngoài vào trong:

RootLayout
    MenuLayout
        PizzaPage

Truy cập / và chỉ bố cục gốc chạy: bố cục menu không nằm trong đường dẫn URL đó nên sẽ không bao giờ xuất hiện.

Bố cục lồng nhau được viết giống hệt bố cục gốc, chỉ bỏ phần khung: không có <html>, không có <body>. Chỉ là một component nhận children.

Đây là cách mỗi phần của trang web có thanh bên riêng, các tab riêng và tiêu đề riêng mà không cần một câu lệnh if nào về URL hiện tại.

Thử thách

Dễ

Phần menu cần có tiêu đề riêng: trên /menu và các trang món ăn, nhưng không ở nơi nào khác.

app/menu/layout.jsx đã có sẵn và chuyển thẳng children qua. Bên trong <section>, phía trên {children}, hãy thêm:

Một <h2> có id="menu-header" và văn bản Menu

Các bài kiểm tra xác nhận tiêu đề hiển thị trên /menu và /menu/pizza, đồng thời không còn hiển thị khi quay lại /.

Tự làm thử

import './globals.css';

export const metadata = {
    title: 'My App',
};

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

Tự kiểm tra

Bài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.

Tất cả bài học trong Kiến thức thiết yếu về Next.js

1Vì sao dùng Next.js

Next.js bổ sung gì Thư mục app Trang đầu tiên Ôn tập: Vì sao dùng Next.js

4Máy chủ và client

Hai loại thành phần Đọc lỗi Dòng 'use client'Giữ phần client nhỏ gọn Máy chủ bên trong client Tóm tắt: máy chủ và client

7Điều hướng phía máy khách

Liên kết đang hoạt động Điều hướng bằng code Lọc bằng URL Bộ xử lý tuyến đường Ôn tập: Điều hướng

3Bố cục và siêu dữ liệu

Bố cục gốc Điều hướng dùng chungBố cục lồng nhauSiêu dữ liệu trang Siêu dữ liệu động Ôn tập: bố cục

6Server Actions

Server Action là gì Biểu mẫu có thể hoạt động Đọc dữ liệu biểu mẫu Làm mới trang Ôn tập: Server Actions