Dynamic Sitemap: динамічна карта сайту

Реалізуєте sitemap для великої кількості сторінок, генеруючи URL динамічно з бази або зовнішнього API.

Що таке динамічна sitemap

Sitemap — це XML-файл зі списком URL, які пошукові системи можуть сканувати. Для невеликого сайту його можна створити вручну, але для блогу, каталогу або маркетплейсу список сторінок часто змінюється.

У Next.js з App Router sitemap створюється спеціальним файлом:

text

app/sitemap.ts

Next.js автоматично обробляє цей файл і робить його доступним за адресою:

text

/sitemap.xml

typescript

import type { MetadataRoute } from "next";

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: "https://example.com",
      lastModified: new Date(),
      changeFrequency: "yearly",
      priority: 1,
    },
  ];
}

typescript

import type { MetadataRoute } from "next";

type CmsPage = {
  slug: string;
  updatedAt: string;
};

type CmsResponse = {
  pages: CmsPage[];
};

const siteUrl = process.env.SITE_URL;

if (!siteUrl) {
  throw new Error("SITE_URL environment variable is not defined");
}

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const response = await fetch(`${process.env.CMS_URL}/api/pages`, {
    next: {
      revalidate: 3600,
    },
  });

  if (!response.ok) {
    throw new Error("Failed to fetch pages for sitemap");
  }

  const data = (await response.json()) as CmsResponse;

  return data.pages.map((page) => ({
    url: new URL(`/pages/${page.slug}`, siteUrl).toString(),
    lastModified: new Date(page.updatedAt),
    changeFrequency: "weekly",
    priority: 0.7,
  }));
}

typescript

import type { MetadataRoute } from "next";

type Article = {
  slug: string;
  updatedAt: string;
};

type Product = {
  slug: string;
  updatedAt: string;
};

type ApiResponse = {
  articles: Article[];
  products: Product[];
};

const siteUrl = process.env.SITE_URL;

if (!siteUrl) {
  throw new Error("SITE_URL environment variable is not defined");
}

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const response = await fetch(`${process.env.CMS_URL}/api/sitemap-data`, {
    next: {
      revalidate: 3600,
    },
  });

  if (!response.ok) {
    throw new Error("Failed to fetch sitemap data");
  }

  const data = (await response.json()) as ApiResponse;

  const articleUrls: MetadataRoute.Sitemap = data.articles.map((article) => ({
    url: new URL(`/articles/${article.slug}`, siteUrl).toString(),
    lastModified: new Date(article.updatedAt),
    changeFrequency: "monthly",
    priority: 0.8,
  }));

  const productUrls: MetadataRoute.Sitemap = data.products.map((product) => ({
    url: new URL(`/products/${product.slug}`, siteUrl).toString(),
    lastModified: new Date(product.updatedAt),
    changeFrequency: "weekly",
    priority: 0.6,
  }));

  return [
    {
      url: siteUrl,
      lastModified: new Date(),
      changeFrequency: "daily",
      priority: 1,
    },
    ...articleUrls,
    ...productUrls,
  ];
}

typescript

import type { MetadataRoute } from "next";

type Product = {
  slug: string;
  updatedAt: string;
};

const siteUrl = process.env.SITE_URL;
const productsPerSitemap = 50_000;

if (!siteUrl) {
  throw new Error("SITE_URL environment variable is not defined");
}

async function getProductCount(): Promise<number> {
  const response = await fetch(`${process.env.CMS_URL}/api/products/count`, {
    next: {
      revalidate: 3600,
    },
  });

  if (!response.ok) {
    throw new Error("Failed to fetch product count");
  }

  const data = (await response.json()) as { count: number };

  return data.count;
}

async function getProducts(
  offset: number,
  limit: number,
): Promise<Product[]> {
  const params = new URLSearchParams({
    offset: String(offset),
    limit: String(limit),
  });

  const response = await fetch(
    `${process.env.CMS_URL}/api/products?${params.toString()}`,
    {
      next: {
        revalidate: 3600,
      },
    },
  );

  if (!response.ok) {
    throw new Error("Failed to fetch products");
  }

  const data = (await response.json()) as { products: Product[] };

  return data.products;
}

export async function generateSitemaps() {
  const count = await getProductCount();
  const sitemapCount = Math.ceil(count / productsPerSitemap);

  return Array.from({ length: sitemapCount }, (_, id) => ({
    id,
  }));
}

export default async function sitemap({
  id,
}: {
  id: number;
}): Promise<MetadataRoute.Sitemap> {
  const products = await getProducts(
    id * productsPerSitemap,
    productsPerSitemap,
  );

  return products.map((product) => ({
    url: new URL(`/products/${product.slug}`, siteUrl).toString(),
    lastModified: new Date(product.updatedAt),
    changeFrequency: "weekly",
    priority: 0.6,
  }));
}

xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/pages/about</loc>
    <lastmod>2026-01-15T10:00:00.000Z</lastmod>
  </url>
</urlset>

Dynamic Sitemap: динамічна карта сайту

Що таке динамічна sitemap

Формат sitemap у Next.js

Отримання сторінок із зовнішнього API

Як працює кешування

Формування URL

Sitemap для сторінок різних типів

Велика кількість URL

Що додавати до sitemap

Перевірка sitemap

Типові помилки

Використання відносних URL

Відсутність змінної домену

Додавання невідфільтрованих записів

Завантаження всіх сторінок без пагінації

Надто коротке кешування

Додавання `priority` як гарантії позиції

Підсумок

Dynamic Sitemap: динамічна карта сайту

Що таке динамічна sitemap

Формат sitemap у Next.js

Отримання сторінок із зовнішнього API

Як працює кешування

Формування URL

Sitemap для сторінок різних типів

Велика кількість URL

Що додавати до sitemap

Перевірка sitemap

Типові помилки

Використання відносних URL

Відсутність змінної домену

Додавання невідфільтрованих записів

Завантаження всіх сторінок без пагінації

Надто коротке кешування

Додавання priority як гарантії позиції

Підсумок

Додавання `priority` як гарантії позиції