第 2 步：菜单网格
本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 40 课，共 47 课。
挑战
简单在 app/page.jsx 中填充菜单。
- 将
Home改为async，并从../lib/menu.js中await getDishes()。 - 保留主视觉区域，然后在它后面渲染一个
<ul className="grid">，每道菜对应一个<li className="card">（key= slug）。 - 每张卡片包含一个
<div className="thumb">，其id={'thumb-' + dish.slug}，内容为这道菜的emoji，并设置style={{ background: dish.gradient }}。 - 然后添加一个
<div className="card-body">，其中包含一个<h2 className="card-title">，其id={'name-' + dish.slug}，内容为菜名；一个<p className="card-desc">，内容为描述；以及一个<span className="price">，其id={'price-' + dish.slug}，内容为先显示$，再显示价格。
亲手试试
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 步：实时搜索