Ôn tập: bố cục

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 16 trên 47.

Thử thách

Trung bình

Ôn tập chương: tạo khung cho Coddy Eats với thanh điều hướng dùng chung và tiêu đề tab phù hợp.

Trong app/layout.jsx, bên trong <body> và phía trên {children}, thêm <nav> có id="nav", bên trong là một <Link> đến / có id="home-link" và nội dung Home, cùng một <Link> đến /menu có id="menu-link" và nội dung Menu.
Vẫn trong layout, đổi tiêu đề metadata thành chính xác Coddy Eats.
Trong app/menu/page.jsx, xuất một đối tượng metadata có tiêu đề Our Menu, để tab menu có tên riêng.

Các bài kiểm tra đọc tiêu đề tab trên cả hai trang và kiểm tra thanh điều hướng vẫn còn sau khi chuyển đến /menu.

Tự làm thử

import './globals.css';
import Link from 'next/link';

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

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

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 chung Bố cục lồng nhau Siê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