É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
FacileAjoutez un bouton d’ajout au panier et gardez la page sur le serveur.
- Complétez le fichier
components/CartButton.jsxen commençant par'use client';. - Conservez un
countdansuseState(0). Affichez un<button id="add-to-cart" className="primary">contenantAdd to cart, qui l’incrémente lors d’un clic. - Affichez ensuite un
<p id="cart-count" className="cart">contenant le nombre, puisx, puis la propname, puisin the cart, par exemple2 x Street Tacos in the cart. - Dans
app/menu/[slug]/page.jsx, affichez<CartButton name={dish.name} />sous le prix. N’ajoutez 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