Как сделать карту сайта sitemap.xml для NextJS
Создано: 23 января 2025Автор: Егор Астапов77 просмотровСложность: легкий
Покажу вам как сделать динамическую карту сайта sitemap.xml для NextJS? Я перебрал массу статей и нашёл приемлемое решение для себя. Для работы карты сайта Вам необходимо сделать эндпоинт в API для вывода всех новых и старых статей. Посмотрите на статью из официальной документации.
Я использовал функцию map. Она позволяет не писать много кода. Если не нравится решение с map, то читайте статью Как изменить массив объектов Javascript. Обратите внимание на Promise
// ISitemap.ts
export interface ISitemapXml {
url: string;
created_at: string;
}
Теперь сам код для карты сайта.
// sitemap.ts
import type { MetadataRoute } from 'next'
import { notFound } from 'next/navigation';
import { ISitemapXml } from '../interfaces/ISitemap';
export const dynamic = 'force-dynamic';
async function getDataSitemapXml(): Promise {
const url = `${process.env.NEXT_SERVER_API_HOST}/sitemap-xml`;
const response = await fetch(url);
if (response.status === 404) {
notFound();
}
if (!response.ok) {
throw new Error("Unable to fetch sitemap.xml!");
}
return response.json();
}
export default async function sitemap(): Promise {
let posts = await getDataSitemapXml();
let items = [];
items = posts.map((post) => ({
url: `${process.env.NEXT_PUBLIC_FRONT_HOST}/post/${post.url}`,
lastModified: new Date(post.created_at),
changeFrequency: 'weekly',
priority: 0.8
}));
posts = null;
return items;
}