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 tout le fichier. Aucune table de routes à 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 default export : c’est ainsi que Next.js identifie le composant de page dans le 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’app possède une home page. Donnez-lui une page about.

Complétez le fichier app/about/page.jsx.
Exportez par défaut un composant depuis celui-ci.
Il doit retourner un <h1> avec id="about-title" et le texte exact About us.

Laissez app/page.jsx tel quel : 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>
    );
}