Динамические метаданные

Часть раздела Основы Next.js путешествия по React на Coddy — урок 15 из 47.

Объект metadata является константой, поэтому он не может помочь динамическому маршруту: app/dishes/[slug]/page.jsx обслуживает разное dish для каждого URL, и каждому из них нужен свой собственный title.

Для этого экспортируйте функцию:

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

Оно получает те же params, что и страница (промис, поэтому вы делаете await) и возвращает ту же структуру, которую имел объект metadata. Используйте либо одно, либо другое, но никогда оба в одном и том же файле.

Шаблоны заголовков

Повторение названия сайта в заголовке каждой страницы надоедает. Макет может передавать шаблон вместо обычной строки:

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

default: заголовок для страниц, которые его не задают
template: шаблон для страниц, которые его задают; их заголовок подставляется вместо %s

Таким образом, страница, возвращающая title: 'Margherita', отображается во вкладке как Margherita | Coddy Eats, а главная страница, которая ничего не задает, остается Coddy Eats. Напишите брендинг один раз, в layout.

Задание

Средне

Каждая страница блюда сейчас показывает Coddy Eats во вкладке. Дайте каждой странице свой собственный заголовок.

В файле app/dishes/[slug]/page.jsx добавьте экспортируемую async функцию с именем generateMetadata, которая:

Принимает { params } и ожидает через await, чтобы получить slug
Возвращает { title: DISHES[slug].name }

app/layout.jsx уже содержит шаблон '%s | Coddy Eats', поэтому страница /dishes/margherita в итоге должна иметь заголовок Margherita | Coddy Eats. Взгляните на layout: вам не нужно его менять.

Попробуйте сами

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