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 : transformer une application d’une seule page en un petit site, en utilisant tout ce qui a été vu dans ce chapitre.
- Dans
app/about/page.jsx(déjà présent dans la liste des fichiers), faites en sorte que le component renvoie un<h1>avecid="about-title"et le texte exactAbout us. - Dans
app/page.jsx, importezLinkdepuisnext/linket ajoutez un lien vers/aboutavecid="to-about". - La route dynamique
app/menu/[slug]/page.jsxest déjà présente, mais affiche toujourspizza. Rendez son componentasyncafin qu’il attendeparamset affiche leslugcorrespondant dans un<h1>avecid="dish".
Les tests cliquent sur votre lien, puis consultent deux plats différents et attendent deux titres 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