Seitenmetadaten

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

Der Browser-Tab, das Lesezeichen, das Google-Ergebnis, die Link-Vorschau in einem Chat: Sie alle lesen die <title>- und <meta>-Tags der Seite. In Next.js schreiben Sie diese Tags niemals von Hand.

Stattdessen exportiert eine Seite oder ein Layout ein Objekt namens metadata:

// app/menu/page.jsx
export const metadata = {
    title: 'Our Menu',
    description: 'Everything we cook.',
};

export default function Menu() {
    return <h1>Our Menu</h1>;
}

Der Name ist wichtig: Er muss genau metadata lauten und aus der Route-Datei exportiert werden. Next.js liest ihn beim Rendern aus und schreibt den Head-Bereich für Sie.

Metadaten werden den Baum hinunter zusammengeführt, in derselben Reihenfolge von außen nach innen wie Layouts: Das Root-Layout legt Standardwerte fest, und jede Seite kann sie überschreiben. Eine Seite ohne metadata-Export übernimmt einfach alles, was das Layout festgelegt hat. Deshalb wurde bisher jede Seite nach deinem Root-Layout aufgerufen.

Aufgabe

Anfänger

Im Moment steht in jedem Tab von Coddy Eats Coddy Eats, weil das Root-Layout dies festlegt. Die Menüseite verdient einen eigenen Titel.

Exportiere in app/menu/page.jsx oberhalb der Komponente ein metadata-Objekt.
Gib ihm einen title mit genau dem Wert Our Menu.

Die Tests lesen den Dokumenttitel unter /, navigieren dann zu /menu und lesen ihn erneut.

Probier es selbst

import './globals.css';

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

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