Next.js 15 Tutorial - 17 - Routing Metadata

Оптимизация поисковых систем с помощью Nex.js

Введение в метаданные и API Nex.js

• Обсуждение оптимизации поисковых систем (SEO) и роли, которую играет API метаданных в Nex.js для улучшения представления контента при его индексации.

• Два способа обработки метаданных: экспорт статического объекта метаданных или экспорт динамической функции генерации метаданных.

Конфигурация маршрутизации метаданных

• Метаданные следуют порядку сверху вниз, начиная с корневого уровня; если они существуют в нескольких местах, они объединяются, причем свойства страницы переопределяют свойства макета.

• Пример использования статического объекта метаданных на странице "О нас", где заголовок страницы переопределяет заголовок макета.

Динамическая генерация метаданных

• Динамические метаданные полезны, когда информация зависит от параметров текущего маршрута или внешних данных.

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

Реализация функции генерации метаданных

• Создание типа пропсов для компонента и определение функции generateMetadata, которая возвращает объект с заголовком на основе идентификатора продукта.

• Использование асинхронной функции для получения данных о продукте и формирования заголовка на основе этих данных.

Ограничения работы с метаданными

• Невозможность использовать как объект метаданных, так и функцию генерации в одном сегменте маршрута; необходимо выбирать одно из двух.

Импорт компонента счетчика и управление метаданными

Импортирование компонента счетчика

• Необходимо импортировать компонент счетчика и вернуть его, чтобы он отображался на странице.

• Убедитесь, что импорт компонента счетчика находится в верхней части файла.

• Удалите директиву use Cent и хук use State, но оставьте объект метаданных без изменений.

Отображение заголовка страницы

• После обновления маршрута SLC счетчика вы увидите заголовок "Счетчик", а страница будет рендериться без ошибок.