Récapitulatif : Routage
Fait partie de la section L'essentiel de Next.js du Journey React de Coddy — leçon 10 sur 47.
Défi
MoyenRécapitulatif du chapitre : transformez une application d'une seule page en un petit site, en utilisant tout ce qui a été vu dans ce chapitre.
- Créez
app/about/page.jsx. Exportez par défaut (default) un composant qui renvoie un<h1>avecid="about-title"et le texte exactAbout us. - Dans
app/page.jsx, iportez (import)Linkdepuisnext/linket ajoutez un lien vers/aboutavecid="to-about". - Créez la route dynamique
app/menu/[slug]/page.jsx: un composantasyncqui attendparams(avecawait) et affiche leslugcorrespondant dans un<h1>avecid="dish".
Les tests cliqueront sur votre lien, puis visiteront deux plats différents et s'attendront à voir deux en-têtes différents.
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 : Routage