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 асистента у 2026: RAG чатбот, база знань, CRM, Telegram та підтримка
Практичний гід для бізнесу: від чого залежить ціна розробки AI асистента у 2026 році, що входить у RAG чатбот, інтеграції з CRM, Telegram, guardrails, оцінювання, моніторинг і супровід.
AI-assisted attacks і prompt injection у 2026: нова поверхня атак для продуктів з AI
Практичний гайд з безпеки AI-функцій: prompt injection, tool abuse, excessive agency, RAG poisoning, data leakage, output handling, human approval gates і permissions для AI agents.
AI для розробки лендінгів: де він реально прискорює запуск, а де псує конверсію
Дослідження про використання AI у розробці лендінгів: v0, Webflow AI, Builder.io, Framer-подібні AI builders, генерація UX, copy, SEO, персоналізація, A/B тести, ризики шаблонності, безпеки, доступності та технічного боргу.
AI SEO / GEO у 2026: ваші наступні клієнти — не люди, а агенти
Пошук зміщується від кліків до відповідей. Боти та AI-агенти сканують, цитують, рекомендують і дедалі частіше купують. Дізнайтесь, що таке AI SEO / GEO, чому класичного SEO вже недостатньо, і як PAS7 Studio допомагає брендам перемагати у «агентному» вебі.
Професійна розробка для вашого бізнесу
Створюємо сучасні веб-рішення та боти для бізнесу. Дізнайтеся, як ми можемо допомогти вам досягти цілей.