How to Create a Dynamic Sitemap in Next.js

A sitemap is crucial for SEO, helping search engines crawl your Next.js site efficiently. This guide explains how to create a dynamic sitemap that automatically includes static and dynamic routes, such as articles, without manual updates. We’ll compare dynamic and static sitemaps and show why automation is key for scalability. For more SEO strategies, explore our guides on dynamic Markdown rendering, PSEO and SEO basics, SEOZast automation, and SEO automation advantages.

Dynamic vs. Static Sitemaps

A dynamic sitemap programmatically generates URLs by scanning your site’s content, such as article directories, and updates automatically when new pages are added. This approach is ideal for sites with frequently changing content, like blogs or e-commerce platforms, as it eliminates manual updates, reduces errors, and ensures search engines always see the latest URLs. For example, the dynamic sitemap below scans the app/articles directory to include all article pages, complementing dynamic content rendering as shown in our Markdown rendering guide.

In contrast, a static sitemap relies on hardcoded URLs, requiring manual edits whenever your site changes. This is manageable for small sites but becomes impractical for larger or frequently updated sites. Static sitemaps risk becoming outdated, missing new pages, or including deleted ones, which can harm SEO. Manual maintenance is also time-consuming, unlike the automated solutions offered by tools like SEOZast, as discussed in our SEOZast automation guide.

Dynamic Sitemap Code Example

Place this code in app/sitemap.xml/route.ts to generate a dynamic sitemap. It scans the app/articles directory for article pages and combines them with static URLs, excluding changefreq and priority for simplicity.

import { format } from "date-fns";

import fs from "fs";

import path from "path";

// Interface definitions

interface StaticUrl {

path: string;

}

interface ArticlePage {

slug: string;

lastmod: Date;

}

const staticUrls: StaticUrl[] = [

{ path: "/" },

{ path: "/register" },

{ path: "/login" },

{ path: "/privacy-policy" },

{ path: "/terms-of-service" },

{ path: "/user-data-deletion" },

];

/**

* Helper function to scan directories and find articles

function scanDirectory(dir: string, parentPath: string = '', articles: ArticlePage[] = []): ArticlePage[] {

const items = fs.readdirSync(dir);

for (const item of items) {

if (item.startsWith('[') || item === 'api') continue;

const itemPath = path.join(dir, item);

const stat = fs.statSync(itemPath);

if (stat.isDirectory()) {

This dynamic sitemap uses fs to scan the app/articles directory, automatically including new articles without manual intervention. It formats the output as XML, ensuring search engines can crawl all relevant pages.

Static Sitemap Code Example

For comparison, here’s a static sitemap implementation in app/sitemap.xml. It hardcodes all URLs, requiring manual updates when pages are added or removed.

import { format } from "date-fns";

export async function GET() {

const baseUrl = "https://your-domain.com";

const currentDate = format(new Date(), "yyyy-MM-dd'T'HH:mm:ssxxx");

const sitemap = `<?xml version="1.0" encoding="UTF-8"?>

<url>

<loc>${baseUrl}/</loc>