Next.js 14 Генерация карты сайта с поддержкой нескольких языков
Мой сайт на Next.js 14 (App Router) поддерживает несколько языков, и ему необходимо создать sitemap.xml с помощью:
<xhtml:link rel = "alternate" hreflang = "YOUR_LOCALE" href = "YOUR_LINK" />
как показывает Google в следующем примере: https://developers.google.com/search/docs/specialty/international/localized-versions#sitemap
Как это возможно сделать?
В генерации карты сайта Next.js 14 (App Router) вы можете указать только 4 параметра, которые не имеют никакого отношения к локализации: https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap
Или вы можете написать sitemap.xml вручную, но на сайте более 2000 страниц товаров, и делать это вручную — безумие.
Может быть, есть способ построить струну самостоятельно? (getServerSideProps — не поддерживается в App Router)
УПД: Спасибо за решение Андрей Боднар
Раньше решение было отработано за счет использования Route Handlers, где я возвращал контент как в sitemap.xml. Каждая папка с маршрутом.ts называлась «sitemap.xml». Если была необходима динамическая маршрутизация, она находилась внутри папки, например. «[id]» — поместить внутрь папку «sitemap.xml» с маршрутом.ts. Для наглядности структура следующая:
.
└── sitemap.xml/
├── products/
│ ├── [id]/
│ │ └── sitemap.xml/
│ │ └── route.ts
│ └── sitemap.xml/
│ └── route.ts
└── route.ts
Ответы 2
https://github.com/vercel/next.js/commit/e4cd547a505c8380cbf010a78f1e2e3ade0f2307
Похоже, эта функция будет работать только с nextjs 14.2.0 или новее!
Выпущена версия Next.js 14.2. Эта версия включает в себя множество замечательных функций и улучшений, включая создание локализованного файла Sitemap.
Теперь вы можете создать локализованную карту сайта следующим образом:
import { MetadataRoute } from 'next'
export default function sitemap(): MetadataRoute.Sitemap {
return [
{
url: 'https://acme.com',
lastModified: new Date(),
alternates: {
languages: {
es: 'https://acme.com/es',
de: 'https://acme.com/de',
},
},
},
{
url: 'https://acme.com/about',
lastModified: new Date(),
alternates: {
languages: {
es: 'https://acme.com/es/about',
de: 'https://acme.com/de/about',
},
},
},
]
}
Посетите официальную документацию для получения более подробной информации.
Я думаю это не для App Router верно, это для старого способа