Dynamische Metadaten

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

Ein metadata-Objekt ist eine Konstante, daher kann es bei einer dynamischen Route nicht helfen: app/dishes/[slug]/page.jsx liefert unter jeder URL ein anderes Gericht und jedes benötigt seinen eigenen Titel.

Exportiere dafür stattdessen eine Funktion:

export async function generateMetadata({ params }) {
    const { slug } = await params;
    return { title: DISHES[slug].name };
}

Es erhält dieselben params, die auch die Seite erhält (ein Promise, du nutzt also await), und gibt dieselbe Struktur zurück, die das metadata-Objekt hatte. Verwende entweder das eine oder das andere, niemals beides in derselben Datei.

Titel-Templates

Das Wiederholen des Seitennamens im Titel jeder Seite wird schnell eintönig. Ein Layout kann ein Muster anstelle einer einfachen Zeichenkette weitergeben:

// app/layout.jsx
export const metadata = {
    title: {
        default: 'Coddy Eats',
        template: '%s | Coddy Eats',
    },
};

default: der Titel für Seiten, die keinen festlegen
template: das Muster für Seiten, die einen festlegen; ihr Titel wird an der Stelle von %s eingesetzt

So wird aus einer Seite, die title: 'Margherita' zurückgibt, Margherita | Coddy Eats im Tab, und die Startseite, die nichts festlegt, bleibt Coddy Eats. Schreibe das Branding einmalig im Layout.

Aufgabe

Mittel

Jede Gerichtsseite zeigt derzeit Coddy Eats im Tab an. Gib jeder ihren eigenen Titel.

Füge in app/dishes/[slug]/page.jsx eine exportierte async Funktion namens generateMetadata hinzu, die:

{ params } entgegennimmt und darauf await ausführt, um slug zu erhalten
{ title: DISHES[slug].name } zurückgibt

app/layout.jsx enthält bereits das Template '%s | Coddy Eats', sodass /dishes/margherita am Ende den Titel Margherita | Coddy Eats haben sollte. Wirf einen Blick auf das Layout: Du musst es nicht ändern.

Probier es selbst

import './globals.css';

export const metadata = {
    title: {
        default: 'Coddy Eats',
        template: '%s | Coddy Eats',
    },
};

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