Récapitulatif : Récupération de données
Fait partie de la section L'essentiel de Next.js du Journey React de Coddy — leçon 28 sur 47.
Défi
MoyenRécapitulatif du chapitre : un menu qui charge tout sur le serveur.
lib/data.js est fourni et verrouillé : getDishes() renvoie une promesse pour un tableau d'objets { id, name, price }, et getDish(slug) en recherche un seul.
- Dans
app/page.jsx, faites deHomeune fonctionasyncet faites unawait getDishes()dans une variabledishes. - À l'intérieur de
<ul id="dish-list">, affichez un<li>par plat, aveckey={dish.id},id={dish.id}et lenamedu plat comme texte. app/menu/[slug]/page.jsxafficheUnknown dishpour chaque URL : il déstructureparamssans l'attendre. Attendez (await)paramspour que la recherche obtienne un vraislug. Visiter/menu/carbonaradoit afficherCarbonaradans#dish-nameet son prix dans#dish-price.
Essayez vous-même
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</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 : Routage5Données sur le serveur
Composants asynchronesAttendre les paramètres de routeDeux requêtes simultanéesÉtats de chargementGestion des erreursRécapitulatif : Récupération de données