É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
MoyenPermettez aux utilisateurs de laisser un avis sur un plat.
- Complétez le fichier
app/actions.jsen commençant par'use server';et exportezasync function addReview(formData). - Lisez
slugettextdepuis les données du formulaire, ignorez untextvide, puis exécutezawait addReviewToDb(slug, text)et appelezrevalidatePath('/menu/' + slug)depuisnext/cache. - Dans la page du plat, exécutez
await getReviews(slug)et ajoutez une<section>sous l’article.detail. - Elle contient
<form id="review-form" action={addReview}>avec un champ masquéname="slug"contenant le slug, un champ texteid="review-input" name="text", et<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