Метаданные страницы

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

Вкладка браузера, закладка, результат поиска в Google, превью ссылки в чате: все они читают теги <title> и <meta> страницы. В Next.js вы никогда не пишете эти теги вручную.

Вместо этого страница или макет экспортирует объект с именем metadata:

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

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

Имя имеет значение: оно должно быть именно metadata, экспортируемым из файла маршрута. Next.js считывает его во время рендеринга и записывает head за вас.

Метаданные объединяются сверху вниз по дереву в том же порядке снаружи внутрь, что и макеты: корневой макет задаёт значения по умолчанию, а любая страница может их переопределить. Страница без экспорта metadata просто наследует всё, что задал макет — именно поэтому каждая страница до сих пор называлась в честь вашего корневого макета.

Задание

Новичок

Прямо сейчас на каждой вкладке Coddy Eats написано Coddy Eats, потому что именно это задает корневой макет. Страница меню заслуживает собственного заголовка.

В файле app/menu/page.jsx над компонентом экспортируйте объект metadata.
Задайте ему title со значением ровно Our Menu.

Тесты считывают заголовок документа на /, затем переходят на /menu и считывают его снова.

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

import './globals.css';

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

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