Étape 6 : Ajouter au panier
Fait partie de la section L'essentiel de Next.js du Journey React de Coddy. Leçon 44 sur 47.
Défi
FacileAjoute un cart button et garde la page sur le serveur.
- Complète le fichier
components/CartButton.jsxen commençant par'use client';. - Conserve un
countdansuseState(0). Affiche un<button id="add-to-cart" className="primary">contenantAdd to cart, qui l’incrémente lors d’un clic. - Affiche en dessous un
<p id="cart-count" className="cart">contenant le count, puisx, puis la propname, puisin the cart, par exemple2 x Street Tacos in the cart. - Dans
app/menu/[slug]/page.jsx, affiche<CartButton name={dish.name} />sous le price. N’ajoute pas'use client'à la page.
Essayez vous-même
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>
);
}Toutes les leçons de L'essentiel de Next.js
1Pourquoi Next.js
Ce que Next.js apporteLe dossier AppVotre première pageRécapitulatif : Pourquoi Next.js2Routage et liens
Les dossiers sont des routesRoutes imbriquéesLier des pagesRoutes dynamiquesPages non trouvéesRécapitulatif : Routage