第 6 步：加入购物车
本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 44 课，共 47 课。
挑战
简单添加一个购物车按钮，并让页面保留在服务器端。
- 从
'use client';开始，完成文件components/CartButton.jsx。 - 使用
useState(0)保存count。渲染一个文本为Add to cart的<button id="add-to-cart" className="primary">，点击时让计数加 1。 - 在它下面渲染
<p id="cart-count" className="cart">，内容依次为计数、x、name属性和in the cart，例如2 x Street Tacos in the cart。 - 在
app/menu/[slug]/page.jsx中，在价格下方渲染<CartButton name={dish.name} />。不要在页面中添加'use client'。
亲手试试
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 步：实时搜索