Étape 8 : Laisser un avis
Fait partie de la section L'essentiel de Next.js du Journey React de Coddy — leçon 46 sur 47.
Défi
MoyenLaissez les utilisateurs donner leur avis sur un plat.
- Créez
app/actions.jsen commençant par'use server';et exportezasync function addReview(formData). - Lisez
slugettextà partir des données du formulaire, ignorez untextvide, puis faites unawait addReviewToDb(slug, text)et appelezrevalidatePath('/menu/' + slug)depuisnext/cache. - Dans la page du plat, faites
await getReviews(slug)et ajoutez une<section>sous l'élémentarticle.detail. - Elle contient
<form id="review-form" action={addReview}>avec un input cachéname="slug"portant le slug, un input texteid="review-input" name="text", et un<button id="review-submit" type="submit">. - Sous le formulaire, affichez
<ul id="review-list" className="reviews">avec un<li>par avis, chacun ayantid={'review-' + index}.
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