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 une mise en page : é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>
    );
}

Note où se trouve {children} : après la navigation. Tout ce que tu places avant apparaît au-dessus de la page, tout ce qui vient après apparaît en dessous. La mise en page est simplement du JSX. La seule règle est que {children} doit se trouver quelque part à l’intérieur.

Maintenant, la mise en page est votre fichier, et non plus un fichier verrouillé. Ajoutez la navigation, puis regardez-la rester en place tandis que la page change en dessous.

Défi

Facile

Donne à Coddy Eats une barre de navigation présente sur chaque page.

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

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 : tu ne modifies que la mise en page. Les tests visitent ensuite /menu et vérifient que la barre de navigation est toujours affichée.

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