Navigazione condivisa

Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 12 di 47.

Una barra di navigazione è l'elemento classico da inserire in un layout: scritta una sola volta, presente in ogni route, senza essere mai rimontata.

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

Nota dove si trova {children}: dopo la nav. Qualsiasi cosa inserisci prima appare sopra la pagina, qualsiasi cosa inserisci dopo appare sotto. Il layout è solo JSX. L’unica regola è che {children} deve trovarsi da qualche parte lì dentro.

Ora il layout è tuo, non è bloccato. Aggiungi la barra di navigazione, poi guarda come resta al suo posto mentre la pagina cambia sotto di essa.

Sfida

Facile

Aggiungi a Coddy Eats una barra di navigazione presente su ogni pagina.

In app/layout.jsx, dentro <body> e sopra {children}, aggiungi:

Un <nav> con id="nav"
Al suo interno, un <Link> verso / con id="home-link" e il testo Home
E un <Link> verso /menu con id="menu-link" e il testo Menu

Le pagine sono bloccate: devi modificare solo il layout. In seguito, i test visitano /menu e controllano che la barra di navigazione sia ancora visibile.

Provalo tu

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