Gemeinsame Navigation

Teil des Abschnitts Next.js Essentials der React-Journey von Coddy — Lektion 12 von 47.

Eine Navigationsleiste ist das klassische Element für ein Layout: einmal geschrieben, auf jeder Route vorhanden und wird nie erneut gemountet.

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

Beachte, wo {children} platziert ist: nach der Nav. Alles, was du davor einfügst, erscheint über der Seite, alles danach erscheint darunter. Das Layout ist einfach JSX. Die einzige Regel ist, dass {children} irgendwo darin enthalten sein muss.

Jetzt ist das Layout deine Datei und nicht mehr gesperrt. Füge die Navigation (nav) hinzu und beobachte, wie sie an ihrem Platz bleibt, während sich die Seite darunter ändert.

Aufgabe

Einfach

Gib Coddy Eats eine Navigationsleiste, die auf jeder Seite vorhanden ist.

In app/layout.jsx, innerhalb von <body> und oberhalb von {children}, füge hinzu:

Ein <nav> mit id="nav"
Darin einen <Link> zu / mit id="home-link" und dem Text Home
Und einen <Link> zu /menu mit id="menu-link" und dem Text Menu

Die Seiten sind gesperrt: Du bearbeitest nur das Layout. Die Tests rufen danach /menu auf und prüfen, ob die Navigationsleiste weiterhin auf dem Bildschirm zu sehen ist.

Probier es selbst

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