Генерируем sitemap.xml в Next.js

23 июн. 2024 г.

2 минуты284 слова

Файл sitemap.xml или в простонародье — карта сайта — помогает поисковым роботам индексировать сайт. Поисковый робот смотрит на карту и понимает какие страницы более важные, где они находятся и когда были обновлены.

Иногда я добавляю новые записи и заметки в блог, и их нужно индексировать. Можно каждый раз обновлять sitemap.xml руками, но это такое, сами понимаете... да и зачем, когда в Next.js есть возможность автоматически генерировать карту сайта.

Ниже пример кода, который генерирует карту сайта для каждой страницы и записи в блоге.

app/sitemap.ts

import { MetadataRoute } from 'next';
import { getPosts } from '../lib/getPosts';
import { navigationRoutes } from '../data/navigationRoutes';
import { PostType } from '../lib/types';
 
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  // получаю записи блога
  const blogsData = await getPosts('blog');
  const notesData = await getPosts('notes');
 
  // для каждого роута создаю запись в xml
  const navRoutes = navigationRoutes.map((element) => ({
      url: `${process.env.HOST}${element.route}`,
      lastModified: new Date(),
  }));
 
  // для каждой записи блога создаю запись в xml
  const blogsSitemap: MetadataRoute.Sitemap = blogsData.map((post: PostType) => ({
    url: `${process.env.HOST}/blog/${post.slug}`,
    lastModified: post.date,
  }));
 
  // для каждой записи заметок создаю запись в xml
  const notesSitemap: MetadataRoute.Sitemap = notesData.map((post: PostType) => ({
    url: `${process.env.HOST}/notes/${post.slug}`,
    lastModified: post.date,
  }));
 
  return [
    {
      url: `${process.env.HOST}`,
      lastModified: new Date(),
    },
    ...navRoutes,
    ...blogsSitemap,
    ...notesSitemap,
  ];
}

После генерации получаем такой XML документ.

http://localhost:3000/sitemap.xml

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<script/>
  <url>
    <loc>http://localhost:3000</loc>
    <lastmod>2024-03-07T19:46:16.089Z</lastmod>
  </url>
  <url>
    <loc>http://localhost:3000/about</loc>
    <lastmod>2024-03-07T19:46:16.089Z</lastmod>
  </url>
  <url>
    <loc>http://localhost:3000/projects</loc>
    <lastmod>2024-03-07T19:46:16.089Z</lastmod>
  </url>
  <url>
    <loc>http://localhost:3000/services</loc>
    <lastmod>2024-03-07T19:46:16.089Z</lastmod>
  </url>
  <url>
    <loc>http://localhost:3000/blog</loc>
    <lastmod>2024-03-07T19:46:16.089Z</lastmod>
  </url>
  <url>
    <loc>http://localhost:3000/notes</loc>
    <lastmod>2024-03-07T19:46:16.089Z</lastmod>
  </url>
  <url>
    <loc>http://localhost:3000/contacts</loc>
    <lastmod>2024-03-07T19:46:16.089Z</lastmod>
  </url>
  <url>
    <loc>http://localhost:3000/blog/how-to-delete-1c-bitrix</loc>
    <lastmod>2019-11-03T00:00:00.000Z</lastmod>
  </url>
  <url>
    <loc>http://localhost:3000/notes/pizza-recipe</loc>
    <lastmod>2023-12-23T00:00:00.000Z</lastmod>
  </url>
</urlset>

Можно еще добавить changeFrequency и priority, но я забил.

Официальная документация тут: https://nextjs.org/.../metadata/sitemap