How to Generate a Dynamic Sitemap in Next.js ?
By SW HabitationA sitemap is so necessary for SEO because it helps search engines like Google crawl and index your pages easily. If you have a Next.js site with dynamically generated content (e.g., blog posts, product pages, or user profiles), you need a dynamic sitemap that updates automatically when new pages are added.
In this blog, we’ll learn:
- Why sitemaps matter for SEO ?
- How to generate a dynamic sitemap in Next.js ?
- How to automatically update it when content changes ?
At the end, your Next.js site will have a fully functional sitemap that keeps search engines happy go lucky and boosts your rankings on next level.
Why Do You Need a Dynamic Sitemap in Next.js ?
A sitemap.xml file tells Google which pages exist on your website. It’s especially useful when:
- You have a big website with multiple pages.
- Your site updates frequently, like a blog or e-commerce store.
- You want to improve SEO and indexing speed.
Instead of manually updating a sitemap every time you publish a new page, we’ll generate it dynamically in Next.js so it always stays up to date!
Step 1: Create a Dynamic API Route for Sitemap,
In Next.js, we can create a dynamic sitemap using an API route that fetches URLs from a database or CMS.
1. Inside the pages/api/ folder, create a new file:
=> pages/api/sitemap.xml.js
2. Add this below code-snippet to generate the sitemap:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { getAllPages } from "../../lib/api"; // Fetch pages dynamically
export default async function handler(req, res) {
const pages = await getAllPages(); // Fetch dynamic URLs
const baseUrl = "https://yourwebsite.com"; // Change this to your actual domain
const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>${baseUrl}</loc>
<priority>1.0</priority>
</url>
${pages
.map(
(page) => `
<url>
<loc>${baseUrl}/${page.slug}</loc>
<lastmod>${new Date(page.updatedAt).toISOString()}</lastmod>
<priority>0.8</priority>
</url>`
)
.join("")}
</urlset>`;
res.setHeader("Content-Type", "application/xml");
res.status(200).send(sitemap);
}What This Code Does ?
=> Fetches dynamic pages from getAllPages().
=> Generates an XML sitemap dynamically.
=> Sends it as a response when /api/sitemap.xml is requested.
Step 2: Make Sitemap Available at /sitemap.xml
Now, let’s make sure Google can access it. so, open next.config.js and add below code snippet,
1
2
3
4
5
6
7
8
9
10
module.exports = {
async rewrites() {
return [
{
source: "/sitemap.xml",
destination: "/api/sitemap.xml",
},
];
},
};When you visit example.com/sitemap.xml, it will serve the dynamically generated sitemap!
Step 3: Submit Your Sitemap to Google Search Console
- Go to Google Search Console.
- Select your website.
- Click Sitemaps on the left.
- Enter sitemap.xml (e.g., https://example.com/sitemap.xml).
- Click Submit!
Google will now automatically crawl and index your pages whenever they update.
Bonus: Automatically Rebuild Sitemap on Content Changes
If your content updates frequently, you can revalidate the sitemap automatically using Next.js Incremental Static Regeneration (ISR).
Modify your API route (sitemap.xml.js) like below:
1
2
3
4
export default async function handler(req, res) {
res.setHeader("Cache-Control", "s-maxage=86400, stale-while-revalidate"); // Revalidate every 24 hours
...
}This ensures that Google always gets the latest version of your sitemap!
Conclusion
✅ A sitemap.xml is very for SEO.
✅ You can generate it dynamically in Next.js using an API route.
✅ Google will always have updated pages indexed automatically.
With this above mentioned setup, your website’s SEO will improve, and your new pages will get discovered faster.
Next blog that you can read...
By SW HabitationBy SW HabitationBy SW Habitation