Wspólna nawigacja

Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 12 z 47.

Pasek nawigacyjny to klasyczny element układu: zapisany raz, obecny na każdej trasie, nigdy nie montowany ponownie.

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

Zwróć uwagę, gdzie znajduje się {children}: za elementem nav. Wszystko, co umieścisz przed nim, pojawi się nad stroną, a wszystko, co umieścisz po nim, pojawi się pod stroną. Układ to po prostu JSX. Jedyna zasada mówi, że {children} musi się gdzieś tam znaleźć.

Teraz układ jest Twój, a nie zablokowany. Dodaj nawigację, a potem obserwuj, jak pozostaje na swoim miejscu, gdy zawartość strony zmienia się pod nią.

Wyzwanie

Łatwy

Dodaj Coddy Eats pasek nawigacyjny, który będzie widoczny na każdej stronie.

W app/layout.jsx, wewnątrz <body> i nad {children}, dodaj:

<nav> z id="nav"
Wewnątrz niego <Link> do / z id="home-link" i tekstem Home
Oraz <Link> do /menu z id="menu-link" i tekstem Menu

Strony są zablokowane: możesz edytować tylko układ. Testy później odwiedzą /menu i sprawdzą, czy pasek nawigacyjny nadal jest widoczny na ekranie.

Spróbuj swoich sił

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