Étape 1 : Squelette de l'application
Fait partie de la section L'essentiel de Next.js du Journey React de Coddy. Leçon 39 sur 47.
Défi
FacileConstruisez la structure dans app/layout.jsx.
- Importez
./globals.cssetLinkdepuisnext/link. - Exportez
metadataavec un objettitle:defaultégal àCoddy Eatsettemplateégal à%s | Coddy Eats. - À l’intérieur de
<body>, ajoutez un<nav className="nav">contenant trois liens :className="brand"vers/affichantCoddy Eats,id="nav-menu"vers/affichantMenu, etid="nav-desserts"vers/?category=dessertaffichantDesserts. - Sous la barre de navigation, encapsulez
{children}dans un<div className="container">.
Essayez vous-même
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ées8Projet : Coddy Eats
Étape 1 : Squelette de l'application
Étape 2 : Grille du menuÉtape 3 : Pages des platsÉtape 4 : État de chargementÉtape 5 : Titres de pageÉtape 6 : Ajouter au panierÉtape 7 : Filtre par catégorieÉtape 8 : Laisser un avisÉtape 9 : Recherche en temps réel