While small, logically organized sites may not need one, if you want to programmatically generate a dynamic sitemap, you'll want to add one to your app directory.

1. Creating a Dynamic Sitemap in Next.js

Instead of using a static sitemap.xml, we’ll generate it dynamically to include all posts from Payload CMS.

Step 1: Create a sitemap.ts file

Inside your app directory, create the sitemap.ts file (app-name/src/app/sitemap.ts).

Step 2: Define the sitemap function

Import MetadataRoute from Next.js:

1import type { MetadataRoute } from 'next'

Then, export an async function called sitemap:

1import type { MetadataRoute } from 'next'
2
3export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
4  return []
5}

Why async? We need to fetch data from Payload, which requires an asynchronous function.

Step 3: Fetch posts from Payload

Now, import getPayload from Payload:

1import type { MetadataRoute } from 'next'
2import { getPayload } from 'payload'
3import config from '@payload-config'
4
5export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
6  return []
7}

Initialize Payload inside the function:

1import type { MetadataRoute } from 'next'
2import { getPayload } from 'payload'
3import config from '@payload-config'
4
5export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
6  const payload: BasePayload = await getPayload({ config })
7}

Now, fetch all posts:

1import type { MetadataRoute } from 'next'
2import { getPayload } from 'payload'
3import config from '@payload-config'
4
5export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
6  const payload: BasePayload = await getPayload({ config })
7  const posts: PaginatedDocs<Post> = await payload.find({
8    collection: 'posts',
9    limit: 0, // We set this to zero to retrieve all documents instead of using a default pagination limit
10    where: {}
11  })
12}

Step 4: Define sitemap structure

At the time of this recording, the only fields Google actively considers are:

loc (URL of the page)
lastmod (Last modified date)
Localized content references (if applicable)

First, import getServerSideURL, which helps dynamically set the base URL:

1import { getServerSideURL } from '@/utilities/getURL'

Then, define the sitemap format:

1import type { MetadataRoute } from 'next'
2import { getPayload } from 'payload'
3import config from '@payload-config'
4import { getServerSideURL } from '@/utilities/getURL'
5
6export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
7  const payload: BasePayload = await getPayload({ config })
8  
9  // Fetch all posts
10  const posts: PaginatedDocs<Post> = await payload.find({
11    collection: 'posts',
12    limit: 0,
13    where: {}
14  })
15
16  // Define the base URL dynamically
17  const url: string = getServerSideURL()
18
19  // Return structured sitemap data
20  return [
21    ...posts.docs.map(({ slug, updatedAt }: { slug: string | null | undefined, updatedAt: string }) => ({
22      url: `${url}/${slug}`,
23      lastModified: new Date(updatedAt),
24    })),
25  ]
26}

Now, every post will be included dynamically.

If you also want to include pages in your sitemap, you can modify the function like this:

1const pages: PaginatedDocs<Page> = await payload.find({
2  collection: 'pages',
3  limit: 0,
4  where: {}
5})
6
7return [
8  ...posts.docs.map(({ slug, updatedAt }) => ({
9    url: `${url}/${slug}`,
10    lastModified: new Date(updatedAt),
11  })),
12  ...pages.docs.map(({ slug, updatedAt }) => ({
13    url: `${url}/${slug}`,
14    lastModified: new Date(updatedAt),
15  })),
16]

You can customize filters to exclude certain documents from appearing in search engines.

Once you save the file, you can load up localization by visiting: http://localhost:3000/sitemap.xml and it should look something like this:

1<?xml version="1.0" encoding="UTF-8"?>
2<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
      <loc>http://localhost:3000/undefined</loc>
      <lastmod>2025-01-06T21:44:40.250Z</lastmod>
  </url>
  <url>
      <loc>http://localhost:3000/blog-3</loc>
      <lastmod>2025-01-03T16:10:55.618Z</lastmod>
  </url>
  <url>
      <loc>http://localhost:3000/blog-1</loc>
      <lastmod>2025-02-06T16:23:05.010Z</lastmod>
  </url>
  <url>
      <loc>http://localhost:3000/blog-1</loc>
      <lastmod>2025-02-07T01:48:50.222Z</lastmod>
  </url>
19</urlset>

2. Adding localization support to your sitemap

If your site has localized content, you’ll need to include the alternates property.

Step 1: Modify the sitemap function

Although I can't show you explicitly what you would do, we'll assume we have an English (en) and Spanish (es) version of each document. Each entry should include an alternates field specifying different language versions.

Here’s how to modify the function:

1import type { MetadataRoute } from 'next'
2import { getPayload } from 'payload'
3import config from '@payload-config'
4import { getServerSideURL } from '@/utilities/getURL'
5
6export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
const payload: BasePayload = await getPayload({ config })

// Fetch all posts
const posts: PaginatedDocs<Post> = await payload.find({
  collection: 'posts',
  limit: 0,
  where: {}
})
15
// Define the base URL dynamically
const url: string = getServerSideURL()
18
// Return structured sitemap data with localized content
return [
  ...posts.docs.map(({ slug, updatedAt }: { slug: string | null | undefined, updatedAt: string }) => ({
    url: `${url}/${slug}`,
    lastModified: new Date(updatedAt),
  })),
]
26}
27
// Construct sitemap with localization support
return [
  ...posts.docs.map(({ slug, updatedAt }: { slug: string | null | undefined, updatedAt: string }) => ({
    url: `${url}/en/${slug}`, // English version
    lastModified: new Date(updatedAt),
    alternates: {
      languages: {
        es: `${url}/es/${slug}`, // Spanish version
      },
    },
  })),
]

How this works

The primary URL is ${url}/${slug}.
The English version (en) is ${url}/en/${slug}.
The Spanish version (es) is ${url}/es/${slug}.Note: Localization structures vary by project. If your slugs are localized, update the logic accordingly.

3. Testing your sitemap

Once you’ve saved the file, visit: http://localhost:3000/sitemap.xml.

Although the styling of the sitemap has gone away, if you look in your source code, each URL will be formatted properly and easily readable by search engines and the alternate locale being populated correctly.

Final thoughts

Your dynamic sitemap built with Next.js & Payload should now be live. It includes:

All posts from Payload
Last modified timestamps
Localized content (if necessary)