Navigation partagée

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

Une barre de navigation est l'élément classique à placer dans un layout : écrite une seule fois, présente sur chaque route, jamais remontée.

// app/layout.jsx
import Link from 'next/link';

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <nav>
                    <Link href="/">Home</Link>
                </nav>
                {children}
            </body>
        </html>
    );
}

Notez où se trouve {children} : après la nav. Tout ce que vous mettez avant apparaît au-dessus de la page, tout ce que vous mettez après apparaît en dessous. Le layout est simplement du JSX. La seule règle est que {children} doit s'y trouver quelque part.

Désormais, le layout est votre fichier, pas un fichier verrouillé. Ajoutez le nav, puis observez-le rester en place pendant que la page change en dessous.

Défi

Facile

Donnez à Coddy Eats une barre de navigation (nav bar) présente sur chaque page.

Dans app/layout.jsx, à l'intérieur de <body> et au-dessus de {children}, ajoutez :

Un <nav> avec id="nav"
À l'intérieur, un <Link> vers / avec id="home-link" et le texte Home
Et un <Link> vers /menu avec id="menu-link" et le texte Menu

Les pages sont verrouillées : vous modifiez uniquement le layout. Les tests visiteront /menu ensuite et vérifieront que la navigation est toujours affichée à l'écran.

Essayez vous-même

import './globals.css';
import Link from 'next/link';

export const metadata = {
    title: 'Coddy Eats',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}