sitemap

[normal grotto]

In next.js app router, what is the best practise for sitemap??

Should I use raw sitemap.xml or sitemap.ts?

[bleak osprey]

Hi @normal grotto. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

In Next.js App Router, the best practice is to use the programmatic approach with sitemap.ts (or sitemap.js) rather than a raw sitemap.xml file, especially if your sitemap needs to be dynamic or updated regularly.

Why use sitemap.ts?

• You can generate the sitemap dynamically based on your data (e.g., fetching URLs from a database).
• Next.js will automatically serve the generated sitemap at /sitemap.xml.
• The function can return an array of objects describing each URL, supporting properties like lastModified, changeFrequency, priority, and even alternate language links.
• This approach is cached by default for performance, unless you use dynamic APIs or configs.

Example:

import type { MetadataRoute } from 'next'

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,
    },
    {
      url: '<https://acme.com/blog',>
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 0.5,
    },
  ]
}

This will generate a valid sitemap.xml at build time or runtime, depending on your setup, and is the recommended way for most Next.js projects using the App Router Next.js sitemap.xml docs | Vercel guide.

When to use raw sitemap.xml?

• If your sitemap is completely static and will never change, you can use a raw sitemap.xml file in the root of your app directory. However, this is less flexible and not recommended for most modern web apps.

Summary:
Use sitemap.ts for flexibility, maintainability, and to leverage Next.js features. Use raw sitemap.xml only for very simple, unchanging sites.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@normal grotto Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[normal grotto]

@bleak osprey
next.js app router, sitemap.ts is always runs on server?

[bleak osprey]

Let me check the knowledge base for you again. Give me one moment! :books:

---

Yes, in the Next.js App Router, the sitemap.ts (or sitemap.js) file is treated as a special Route Handler that runs on the server. It is used to programmatically generate your sitemap and is not executed on the client side. The function you export from sitemap.ts is called by the server to generate the XML response for /sitemap.xml Next.js sitemap.xml docs.

Additionally, the documentation notes that sitemap.js is cached by default unless you use a dynamic API or dynamic config, which further confirms its server-side nature. There is no indication in the provided sources that sitemap.ts would ever run on the client side.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: