How to Generate a Sitemap in Next.js

A sitemap in Next.js is easier to generate than most developers think — and more important than most skip. With the App Router, a single sitemap.ts file auto-generates your XML, including dynamic blog posts and product pages. Here's the full setup, including the robots.txt connection most guides miss.

Quick Answer

To generate a sitemap in Next.js (App Router), add a sitemap.ts file that exports an array of URLs with last-modified dates; Next.js serves it automatically at /sitemap.xml. Generate dynamic entries (blog posts, products) by reading your data source so the sitemap updates itself, then reference it from robots.txt and submit it in Google Search Console.

What a sitemap is

A sitemap is an XML list of your site's URLs that helps search engines discover and prioritize pages. It is especially useful for large sites and freshly published content.

A static sitemap.ts

// (untested-here) app/sitemap.ts
import type { MetadataRoute } from 'next';

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    { url: 'https://example.com', lastModified: new Date() },
    { url: 'https://example.com/blog', lastModified: new Date() },
  ];
}

Dynamic entries from your content

Read your database or CMS inside sitemap.ts and map each item to a URL, so new posts appear in the sitemap automatically:

// (untested-here)
const posts = await getPosts();
const postEntries = posts.map((p) => ({
  url: `https://example.com/blog/${p.slug}`,
  lastModified: p.updatedAt,
}));

robots and submission

Point robots.txt at your sitemap and submit the sitemap URL in Search Console so crawling starts quickly. See the Next.js SEO checklist for the rest.

How this maps to FastStaq

FastStaq ships a generated `sitemap.ts` as part of its built-in SEO, so your blog and pages are listed for search engines without extra setup — new content flows into the sitemap automatically. See the Next.js SEO checklist and the Supabase + Next.js guide.

Frequently asked questions

Where do I put the sitemap in the App Router? Add app/sitemap.ts; Next.js serves it at /sitemap.xml.

How do dynamic pages get into the sitemap? Read your data source inside sitemap.ts and map each record to a URL.

Do I still need robots.txt? Yes — it should reference your sitemap and set crawl rules.

Next steps

• Read the Next.js SEO checklist

• See the Supabase + Next.js guide

• Back to the Supabase + Next.js integration hub