Routes imbriquées

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

À vous de jouer. Ajouter une page à une application Next.js se fait en deux étapes : créez un dossier, puis placez-y un fichier page.jsx.

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

C'est tout le fichier. Pas de table de routage à mettre à jour, aucun import nulle part ailleurs, rien à redémarrer. Le composant est du React ordinaire. La seule chose qui l'a transformé en URL est l'endroit où vous l'avez enregistré.

Deux détails importants à retenir :

Il doit s'agir d'un default export : 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.

Vous voulez aussi /about/team ? Créez app/about/team/ et ajoutez-y un autre page.jsx. Le modèle ne change pas au fur et à mesure que le site grandit, c'est tout l'intérêt.

Défi

Débutant

L'application a une page d'accueil. Donnez-lui une page À propos (about).

Créez le fichier app/about/page.jsx.
Exportez par défaut (default) un composant depuis ce fichier.
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>
    );
}