sitemap.xml in Next.js — Generating SEO-Friendly Sitemaps for Crawlers

1. What Is sitemap.xml?

sitemap.xml is a structured XML file that helps search engines discover and index your site’s pages. It lists URLs along with metadata like last modification date, change frequency, and priority.

2. Static Sitemap

For small applications, you can manually create app/sitemap.xml:

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://acme.com</loc>
    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
    <changefreq>yearly</changefreq>
    <priority>1</priority>
  </url>
</urlset>

3. Dynamic Sitemap with Code

Use sitemap.ts to generate URLs programmatically:

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://acme.com',
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 1,
    },
    {
      url: 'https://acme.com/about',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.8,
    },
  ]
}

4. Image Sitemaps

Use the images property to include image URLs:

{
  url: 'https://example.com',
  images: ['https://example.com/image.jpg'],
}

5. Video Sitemaps

Use the videos property to include video metadata:

{
  url: 'https://example.com',
  videos: [
    {
      title: 'example',
      thumbnail_loc: 'https://example.com/image.jpg',
      description: 'this is the description',
    },
  ],
}

6. Localized Sitemaps

Use alternates.languages to define hreflang links:

{
  url: 'https://acme.com',
  alternates: {
    languages: {
      es: 'https://acme.com/es',
      de: 'https://acme.com/de',
    },
  },
}

7. Splitting Large Sitemaps

Use generateSitemaps() to split into multiple files:

export async function generateSitemaps() {
  return [{ id: 0 }, { id: 1 }]
}

export default async function sitemap({ id }) {
  const start = id * 50000
  const end = start + 50000
  const products = await getProducts(`...`)
  return products.map((p) => ({
    url: `${BASE_URL}/product/${p.id}`,
    lastModified: p.date,
  }))
}

8. Sitemap Object Structure

Each entry can include:

• url: string
• lastModified: string or Date
• changeFrequency: e.g. 'weekly'
• priority: number
• images, videos, alternates: optional

Conclusion

Next.js makes it easy to generate SEO-optimized sitemaps using static files or dynamic route handlers. Whether you need basic URLs, localized variants, or media-rich previews, the sitemap conventions help search engines index your content efficiently and accurately.