Menu
CoddyTech

Bước 2: Lưới thực đơ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 40 trên 47.

challenge icon

Thử thách

Dễ

Hoàn thiện menu trong app/page.jsx.

  1. Chuyển Home thành async và dùng await getDishes() từ ../lib/menu.js.
  2. Giữ nguyên phần hero, sau đó hiển thị một <ul className="grid"> với một <li className="card"> cho mỗi món ăn (key = slug).
  3. Mỗi thẻ chứa một <div className="thumb"> có id={'thumb-' + dish.slug}, nội dung là emoji của món ăn và style={{ background: dish.gradient }}.
  4. Sau đó là một <div className="card-body"> chứa một <h2 className="card-title"> có id={'name-' + dish.slug} và tên món ăn, một <p className="card-desc"> có phần mô tả, và một <span className="price"> có id={'price-' + dish.slug}, hiển thị $ rồi đến giá tiền.

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