Bước 3: Trang món ăn

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

Thử thách

Trung bình

Tạo một trang cho mỗi món ăn.

Trong app/page.jsx, bọc nội dung của mỗi thẻ bằng <Link> với id={'link-' + dish.slug} và href={'/menu/' + dish.slug}.
Hoàn thiện tệp app/menu/[slug]/page.jsx: const { slug } = await params;, sau đó gọi await getDish(slug).
Nếu không có món ăn, gọi notFound() từ next/navigation.
Nếu có món ăn, hãy kết xuất một <article className="detail"> với một <div id="dish-thumb" className="detail-thumb"> (emoji và kiểu nền chuyển sắc), bên cạnh là <h1 id="dish-name">, <p id="dish-stars" className="stars"> hiển thị '★'.repeat(dish.rating), <p id="dish-desc"> và <span id="dish-price" className="price">.
Hoàn thiện tệp app/menu/[slug]/not-found.jsx, phần tử bao ngoài có id="dish-missing" và className="empty".

Tự làm thử

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

export const metadata = {
    title: {
        default: 'Coddy Eats',
        template: '%s | Coddy Eats',
    },
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <nav className="nav">
                    <Link className="brand" href="/">Coddy Eats</Link>
                    <Link id="nav-menu" href="/">Menu</Link>
                    <Link id="nav-desserts" href="/?category=dessert">Desserts</Link>
                </nav>
                <div className="container">
                    {children}
                </div>
            </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