Routes imbriquées

Fait partie de la section L'essentiel de Next.js du Journey React de Coddy. Leçon 6 sur 47.

Fais-le maintenant. Ajouter une page à une app Next.js se fait en deux étapes : créer un dossier, y placer un page.jsx.

// app/about/page.jsx   ->  /about
export default function About() {
    return <h1>About us</h1>;
}

C’est l’intégralité du fichier. Aucune table de routage à mettre à jour, aucun import ailleurs, rien à redémarrer. Le composant est un composant React ordinaire. La seule chose qui l’a transformé en URL, c’est l’endroit où vous l’avez enregistré.

Deux détails à retenir :

Il doit s’agir d’un export par défaut : c’est ainsi que Next.js extrait le composant de page du fichier.
Le nom du composant vous appartient. About, AboutPage, Whatever : l’URL provient du dossier, jamais de la fonction.

Tu veux aussi /about/team ? Crée app/about/team/ et ajoute-y un autre page.jsx. Le modèle ne change pas à mesure que le site s’agrandit, c’est justement le but.

Défi

Débutant

L’application possède une page d’accueil. Ajoute-lui une page « À propos ».

Complète le fichier app/about/page.jsx.
Exporte par défaut un composant depuis ce fichier.
Il doit renvoyer un <h1> avec id="about-title" et le texte exact About us.

Ne modifie pas app/page.jsx : les tests visitent les deux URL.

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>
    );
}