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.
Thử thách
DễHoàn thiện menu trong app/page.jsx.
- Chuyển
Homethànhasyncvà dùngawait getDishes()từ../lib/menu.js. - 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). - Mỗi thẻ chứa một
<div className="thumb">cóid={'thumb-' + dish.slug}, nội dung làemojicủa món ăn vàstyle={{ background: dish.gradient }}. - 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
4Máy chủ và client
Hai loại thành phầnĐọc lỗiDòng 'use client'Giữ phần client nhỏ gọnMáy chủ bên trong clientTóm tắt: máy chủ và client7Điều hướng phía máy khách
Liên kết đang hoạt độngĐiều hướng bằng codeLọc bằng URLBộ xử lý tuyến đườngÔn tập: Điều hướng