第 3 步：菜品页面
本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 41 课，共 47 课。
挑战
中等为每道菜创建一个页面。
- 在
app/page.jsx中，用带有id={'link-' + dish.slug}和href={'/menu/' + dish.slug}的<Link>包裹每张卡片的内容。 - 完成文件
app/menu/[slug]/page.jsx：const { slug } = await params;，然后调用await getDish(slug)。 - 如果没有这道菜，就调用
next/navigation中的notFound()。 - 否则，渲染一个
<article className="detail">，其中包含一个<div id="dish-thumb" className="detail-thumb">（表情符号和渐变样式），并在旁边显示<h1 id="dish-name">、展示'★'.repeat(dish.rating)的<p id="dish-stars" className="stars">、<p id="dish-desc">，以及<span id="dish-price" className="price">。 - 完成文件
app/menu/[slug]/not-found.jsx，其最外层元素包含id="dish-missing"和className="empty"。
亲手试试
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>
);
}Next.js 基础中的所有课
8项目：Coddy Eats
第 1 步：页面框架第 2 步：菜单网格
第 3 步：菜品页面第 4 步：加载状态第 5 步：页面标题第 6 步：加入购物车第 7 步：分类筛选第 8 步：留下评价第 9 步：实时搜索