Next.js XML Sitemap Validator & Dynamic sitemap.ts Generator

Modern Next.js applications require programmatic sitemap generation to handle dynamic database routes, multi-locale subpaths, and headless CMS webhooks without manual file maintenance.

1. The Native app/sitemap.ts Convention

Instead of manually creating XML strings, Next.js provides the MetadataRoute.Sitemap TypeScript interface in app/sitemap.ts (or src/app/sitemap.ts):

// app/sitemap.ts (Next.js App Router)
import { MetadataRoute } from 'next';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await fetch('https://api.example.com/posts').then(res => res.json());

  return posts.map((post: any) => ({
    url: `https://example.com/blog/${post.slug}`,
    lastModified: new Date(post.updatedAt),
    changeFrequency: 'weekly',
    priority: 0.8,
  }));
}

2. Scaling Past 50,000 URLs with generateSitemaps()

If your application has more than 50,000 dynamic URLs (e.g. large programmatic SEO directories or e-commerce stores), Next.js App Router supports automated sitemap index partitioning using the generateSitemaps() export:

// app/sitemap.ts (Automated Sitemap Index Partitioning)
import { MetadataRoute } from 'next';

export async function generateSitemaps() {
  // Return array of sitemap IDs based on database count
  return [{ id: 0 }, { id: 1 }, { id: 2 }];
}

export default async function sitemap({ id }: { id: number }): Promise<MetadataRoute.Sitemap> {
  const limit = 50000;
  const start = id * limit;
  const items = await getItemsFromDb(start, limit);

  return items.map((item) => ({
    url: `https://example.com/product/${item.slug}`,
    lastModified: new Date(item.updatedAt),
  }));
}

Next.js automatically exposes a parent sitemap index at /sitemap.xml referencing /sitemap/0.xml, /sitemap/1.xml, and /sitemap/2.xml.

3. Edge Caching & Revalidation

To prevent heavy database queries on every crawler hit, export export const revalidate = 86400; (24 hours) at the top of app/sitemap.ts. Next.js will cache the compiled XML response at the Vercel/Cloudflare edge, serving it instantly with zero server execution delay.

// app/sitemap.ts (Next.js App Router with Dynamic generateSitemaps Partitioning)
import { MetadataRoute } from 'next';

const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'https://yourdomain.com';

export const revalidate = 86400; // Cache XML at the edge for 24 hours

export async function generateSitemaps() {
  // Divide total catalog into chunks of 50,000 URLs
  return [{ id: 0 }, { id: 1 }];
}

export default async function sitemap({
  id,
}: {
  id: number;
}): Promise<MetadataRoute.Sitemap> {
  const limit = 50000;
  const start = id * limit;
  const dynamicPosts = await fetchPostsFromDatabase(start, limit);

  const entries = dynamicPosts.map((post) => ({
    url: `${BASE_URL}/blog/${post.slug}`,
    lastModified: new Date(post.updatedAt),
    changeFrequency: 'weekly' as const,
    priority: 0.8,
  }));

  if (id === 0) {
    return [
      {
        url: BASE_URL,
        lastModified: new Date(),
        changeFrequency: 'daily',
        priority: 1.0,
      },
      ...entries,
    ];
  }

  return entries;
}