Dynamiczne metadane

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

Obiekt metadata jest stały, więc nie może obsłużyć trasy dynamicznej: app/dishes/[slug]/page.jsx wyświetla inne danie pod każdym adresem URL, a każde z nich potrzebuje własnego tytułu.

W tym celu wyeksportuj zamiast tego funkcję:

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

Otrzymuje te same params co strona (jest obietnicą, więc używasz await) i zwraca obiekt o takim samym kształcie jak obiekt metadata. Użyj jednego albo drugiego, nigdy obu w tym samym pliku.

Szablony tytułów

Powtarzanie nazwy witryny w tytule każdej strony szybko się nudzi. Układ może przekazywać wzorzec zamiast zwykłego ciągu znaków:

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

default: tytuł dla stron, które go nie ustawiają
template: wzorzec dla stron, które go ustawiają; ich tytuł jest wstawiany w miejscu %s

Strona zwracająca title: 'Margherita' wyświetla więc w karcie Margherita | Coddy Eats, a strona główna, która niczego nie ustawia, pozostaje Coddy Eats. Zapisz nazwę marki raz, w układzie.

Wyzwanie

Średni

Na każdej stronie dania na karcie przeglądarki wyświetla się obecnie Coddy Eats. Nadaj każdej z nich własny tytuł.

W pliku app/dishes/[slug]/page.jsx dodaj eksportowaną funkcję async o nazwie generateMetadata, która:

Przyjmuje { params } i używa await, aby uzyskać slug
Zwraca { title: DISHES[slug].name }

app/layout.jsx zawiera już szablon '%s | Coddy Eats', więc tytułem strony /dishes/margherita powinno być Margherita | Coddy Eats. Zajrzyj do pliku layout: nie musisz go zmieniać.

Spróbuj swoich sił

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