Seiten-Metadaten

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 page 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.

Metadata wird im Baum nach unten zusammengeführt, in derselben Reihenfolge von außen nach innen wie Layouts: Das Root-Layout legt Standardwerte fest, und jede Seite kann diese überschreiben. Eine Seite ohne metadata-Export erbt einfach alles, was das Layout festgelegt hat. Aus diesem Grund wurden bisher alle Seiten nach Ihrem Root-Layout benannt.

Aufgabe

Anfänger

Im Moment zeigt jeder Tab von Coddy Eats Coddy Eats an, da dies im Root-Layout so festgelegt ist. Die Speisekarte-Seite verdient ihren eigenen Titel.

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

Die Tests lesen den Dokumententitel auf /, 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>
    );
}