Next.js sitemap hreflang для App Router і static export: @pas7/nextjs-sitemap-hreflang
Практичний гід із Next.js sitemap hreflang для App Router і static export: генеруйте hreflang-альтернативи та x-default, додавайте або виправляйте sitemap.xml, перевіряйте hreflang у CI та підтримуйте змішані контентні пайплайни.
Найскладніше зазвичай не створити один багатомовний sitemap. Найскладніше — підтримувати коректність alternate language URLs у міру росту сайту. Статичні сторінки можуть мати один locale-патерн, контентні хаби — інший, а detail pages — третій. На практиці один багатомовний сайт часто поєднує маршрутизацію головної сторінки, локалізованих хабів і detail pages з locale segment. [1][2]
Next.js App Router дає зручний спосіб генерувати sitemap entries через MetadataRoute.Sitemap, але він не вирішує за вас усі hreflang routing rules. Офіційна документація описує file convention для sitemap і shape результату, а такий пакет закриває прогалину навколо alternate-language linking і route-aware validation. [1][4]
Рекомендації Google щодо hreflang теж піднімають планку. Alternate URLs мають бути повністю кваліфікованими, сторінки повинні посилатися самі на себе та на свої альтернативи, а x-default може бути корисним для language-neutral fallback pages. На маленькому сайті це ще контрольовано, але коли URL надходять з кількох пайплайнів, помилитися дуже легко. [5][6]
Найшвидший старт — це генерація для App Router з routing helper і withHreflangFromRouting.
Оберніть entries генерацією hreflang
У README quick start використовується withHreflangFromRouting(entries, routing, { baseUrl, ensureXDefault: true }), що зберігає генерацію sitemap близькою до звичайного App Router коду. [1]
Саме routing helpers роблять цей пакет чимось більшим, ніж просто маленька обгортка над hreflang.
| Comparison point | Патерн | Типове використання |
|---|---|---|
| Prefix as needed | Головні сторінки та прості локалізовані маршрути на кшталт /, /uk, /de | Корисно, коли default locale має залишатися без префікса, а інші locales потребують префікс |
| Suffix locale | Контентні хаби та статичні сторінки, наприклад /blog/uk або /contact/uk | Корисно, коли hub pages використовують suffix locale pattern замість prefixed path |
| Locale segment | Detail pages на кшталт /blog/en/slug або /blog/uk/slug | Корисно, коли content entries потребують стабільної locale-aware маршрутизації detail pages |
| Mixed prefix pages | Опційні винятки, наприклад /uk/about, поряд з іншими стилями маршрутів | Корисно, коли один сайт поєднує кілька legacy або section-based routing rules |
Багато команд не генерують sitemap entries безпосередньо з одного TypeScript-масиву. У них уже є маніфести, frontmatter exports або CMS-normalized data.
Підтримка зображень тут — гарна деталь, тому що вона відповідає тому, як сучасні статичні сайти реально зберігають контент. У поста може бути одна основна обкладинка та кілька вкладених скриншотів. Документація показує, як витягнути все це в sitemap entry, а не залишати лише top-level URL. [1]
Мінімальний приклад із README виглядає так:
import { createSitemapEntriesFromManifest } from "@pas7/nextjs-sitemap-hreflang";
const entries = createSitemapEntriesFromManifest(blogManifest, {
baseUrl: "https://pas7.com.ua",
sectionPath: "/blog",
defaultLocale: "en",
routeStyle: "locale-segment",
});Хелпер для маніфестів
createSitemapEntriesFromManifest створений для пайплайнів, які вже віддають slug, locales і date fields. Це дозволяє узгодити генерацію sitemap з наявними контентними маніфестами замість дублювання route logic. [1]
Підтримка змішаних джерел
Пакет явно підтримує .ts, .json, .md/.mdx і CMS-driven content pipelines, тому його простіше використовувати з різними джерелами контенту в одному Next.js-проєкті. [1]
Зображення в sitemap entries
Хелпер також може додавати зображення через imagesFor, що корисно, коли sitemap entries повинні містити image URLs із вкладених полів контенту, як-от hero covers і section screenshots. [1]
Чому це важливо
Пакет краще вбудовується в реальні контентні системи, тому що може стартувати з маніфестів і data sources, які команди вже використовують. [1]
CLI невеликий, але поділ між check і inject справді корисний.
Використовуйте check
Використовуйте inject
Найкраще підходить, коли сайт уже генерує sitemap file і вам потрібно додати або виправити hreflang безпосередньо в generated XML на етапі postbuild. [1]
Використовуйте --prefer, коли важливе розташування source file
CLI може автоматично знайти public/sitemap.xml, out/sitemap.xml або sitemap.xml, але явне зазначення пріоритету безпечніше, коли пайплайн має кілька можливих output files. [1]
Exit codes і JSON-формат роблять пакет зручнішим для автоматизації, ніж інструменти, які лише виводять попередження для людей.
Це одна з менш помітних, але сильних сторін пакета. CLI не просто повідомляє, що валідація не пройшла; він розрізняє відсутній input, XML failures і validation errors. Через це поведінку пайплайна набагато легше розуміти й прогнозувати. [1]
Формат звіту так само практичний: ok, issues[], summary.byCode, inputPath і timingMs. Саме такий контракт CI jobs або dashboards можуть споживати без зайвих припущень. [1][3]
Пакет доволі прямолінійний, але workflow багатомовного sitemap усе одно часто ламається у знайомих місцях.
Тримати sitemap alternates окремо від content pipeline. Це зазвичай веде до застарілих locale clusters або відсутніх entries. [1]
Ці офіційні джерела підтверджують поведінку пакета, контекст Next.js sitemap і рекомендації щодо hreflang, використані в цій статті.
Найскладніше зазвичай не один раз додати hreflang. Найскладніше — тримати alternates, route patterns, XML output і CI checks узгодженими в міру росту сайту.
PAS7 Studio може допомогти перетворити це на повторюваний багатомовний SEO-пайплайн з чистішими routing rules, безпечнішою валідацією sitemap і меншою кількістю hreflang-сюрпризів після деплою.
Пов'язані статті
AI SEO / GEO у 2026: ваші наступні клієнти — не люди, а агенти
Пошук зміщується від кліків до відповідей. Боти та AI-агенти сканують, цитують, рекомендують і дедалі частіше купують. Дізнайтесь, що таке AI SEO / GEO, чому класичного SEO вже недостатньо, і як PAS7 Studio допомагає брендам перемагати у «агентному» вебі.
Найпотужніший чіп від Apple? M5 Pro і M5 Max б'ють рекорди
Аналітичний розбір Apple M5 Pro і M5 Max станом на березень 2026 року. Пояснюємо, чому ці чіпи можна вважати найпотужнішими професійними ноутбучними SoC від Apple, як вони виглядають на тлі M4 Pro, M4 Max, M1 Pro, M1 Max і що показують у порівнянні з актуальними Intel та AMD.
Автоматичне тегування та пошук збережених посилань
Інтеграція з GDrive/S3/Notion для автоматичного тегування та швидкого пошуку через пошукові API
Розробка Telegram-ботів та автоматизація
Професійна розробка Telegram-ботів та автоматизація бізнес-процесів: чат-боти, AI-асистенти, інтеграції з CRM та автоматизація процесів.
Професійна розробка для вашого бізнесу
Створюємо сучасні веб-рішення та боти для бізнесу. Дізнайтеся, як ми можемо допомогти вам досягти цілей.