Sitemap в Next.js: генерация карты сайта средствами фреймворка

Next.js — популярный фреймворк для сайтов на React. В отличие от CMS, где карта сайта создаётся плагином, здесь её формирует сам разработчик. Хорошая новость: в современных версиях фреймворка есть встроенный механизм для sitemap и robots.txt, и карта может обновляться автоматически при появлении новых страниц.

Встроенный способ в App Router

В App Router в папке app создаётся специальный файл sitemap, который экспортирует функцию. Функция возвращает массив объектов: адрес страницы, дата изменения, при желании частота обновления и приоритет. Фреймворк сам превращает этот массив в корректный XML и отдаёт его по адресу /sitemap.xml.

Для старого Pages Router обычно используют отдельный маршрут, который формирует XML вручную, или сторонние пакеты, создающие карту при сборке проекта.

Статические и динамические страницы

Статические страницы — главная, о компании, контакты, услуги — можно перечислить списком. Динамические — статьи блога, товары, карточки объектов — берутся из того же источника, что и сами страницы: база данных, headless CMS, файлы с контентом. Функция карты сайта запрашивает список записей и формирует адреса.

Главное правило: карта должна строиться из того же источника данных, что и маршруты. Тогда новая статья появится в карте без ручной правки.

Когда обновляется карта

Зависит от режима рендеринга. Если страница карты генерируется статически при сборке, новые записи появятся только после следующей сборки. Если нужна актуальность без пересборки, карту делают динамической или задают интервал повторной генерации. Для блога, где статьи выходят раз в неделю, достаточно обновления при деплое. Для каталога с ежедневными изменениями лучше динамическая генерация с кешированием.

Большие сайты

У одной карты есть ограничение на число адресов и размер файла по стандарту протокола sitemap. Next.js позволяет разбить карту на несколько файлов с помощью функции, которая возвращает список идентификаторов карт. Тогда создаётся несколько файлов, и каждый содержит свою порцию адресов. В Search Console и Вебмастер добавляются все части или индексный файл.

Языковые версии

Для сайтов на русском и узбекском в объектах карты можно указать альтернативные языковые адреса. Это дублирует атрибуты hreflang в коде страниц и помогает поисковикам связать версии. Проверьте, что адреса обеих версий действительно существуют и отдают код 200.

Дата изменения

Указывайте реальную дату обновления записи из базы или CMS. Частая ошибка — подставлять текущую дату для всех адресов. Тогда поисковики видят, что все страницы «меняются» каждый день, и перестают учитывать это поле.

Что не включать

• страницы с noindex
• адреса с параметрами и фильтрами
• служебные маршруты: API, авторизация, предпросмотр черновиков
• страницы, которые перенаправляют на другие адреса

robots.txt рядом

Тем же способом создаётся файл robots в папке app. В нём укажите адрес карты сайта и правила для служебных маршрутов. Проверьте, что на тестовом окружении, например на превью-доменах, индексация закрыта, а на основном домене открыта: перепутанные окружения — частая причина выпадения сайта из поиска.

Проверка

1. Откройте /sitemap.xml на рабочем домене
2. Убедитесь, что адреса абсолютные и с правильным доменом, а не с адресом превью или localhost
3. Проверьте несколько адресов на код ответа
4. Добавьте карту в Search Console и Вебмастер и посмотрите статус обработки

Типичная ловушка с базовым адресом

Адрес сайта в функции карты часто берут из переменной окружения. Если переменная не задана на рабочем сервере, в карте окажутся адреса вида localhost или технический домен хостинга. Поисковик такие адреса отбросит. Поэтому после каждого крупного деплоя полезно открыть карту и бегло посмотреть первые строки.

Итог

В Next.js карта сайта — это часть кода, и её удобно генерировать из тех же данных, что и страницы. Следите за базовым адресом, датами изменений и окружениями. Если сайт на Next.js не индексируется так, как ожидалось, карта и robots — первое, что стоит проверить.