Skip to content

Discoverability · Next.js (App Router)

How to add a sitemap.xml in Next.js (App Router)

A sitemap is how you tell a search engine which pages exist and when they last changed, rather than waiting for every one of them to be found by following links. Without it, pages that are not linked prominently can go months before they are crawled at all.

The fix for Next.js (App Router)

13x detects your framework from the response and hands you this version rather than the generic one — below 50% confidence it hedges and gives you the generic one instead.

Add app/sitemap.ts. Next serves it at /sitemap.xml:

ts code
import type { MetadataRoute } from "next";

const BASE_URL = "https://example.com";

export default function sitemap(): MetadataRoute.Sitemap {
  const staticRoutes = ["", "/pricing", "/blog"].map((route) => ({
    url: `${BASE_URL}${route}`,
    lastModified: new Date(),
    changeFrequency: "weekly" as const,
    priority: route === "" ? 1 : 0.7,
  }));

  // Add dynamic routes here, e.g.:
  // const posts = await getPosts();
  // ...posts.map((post) => ({ url: `${BASE_URL}/blog/${post.slug}`, lastModified: post.updatedAt }))

  return staticRoutes;
}

The function can be async, so it can read your database or CMS directly.

On a different stack? The general version of this fix explains what 13x checks and why it matters, without assuming a framework.

Check your Next.js (App Router) site

113 deterministic checks against your live URL, in about 30 seconds. Framework detected from the response, so every fix comes back in the form your stack actually uses.

No signup. Results in 30 seconds.

The same fix, other stacks