training-web.ruГлавнаяКатегорииО насКарта сайтаПоискТёмная тема

Категории

Как сделать карту сайта sitemap.xml для NextJS

Создано: 23 января 2025Автор: Егор Астапов77 просмотровСложность: легкий

Покажу вам как сделать динамическую карту сайта sitemap.xml для NextJS? Я перебрал массу статей и нашёл приемлемое решение для себя. Для работы карты сайта Вам необходимо сделать эндпоинт в API для вывода всех новых и старых статей. Посмотрите на статью из официальной документации.

Я использовал функцию map. Она позволяет не писать много кода. Если не нравится решение с map, то читайте статью Как изменить массив объектов Javascript. Обратите внимание на Promise. У вас должен быть обязательно Promise для асинхронной работы функции getDataSitemapXml.

// 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;
}

Комментарии

реклама