DEV Community

Cover image for Generate Dynamic Sitemap in Next js
Aswanth Raveendran EK
Aswanth Raveendran EK

Posted on

Generate Dynamic Sitemap in Next js

Indroduction
In this blog, we'll explore how to dynamically generate a sitemap in Next.js to enhance your website’s SEO and keep the sitemap updated as your content changes.

Next JS
Next.js is a powerful React framework that offers developers several key features for building scalable and optimized web applications. With features like server-side rendering (SSR), static site generation (SSG), and API routes, Next.js allows developers to create high-performance websites with ease. The framework is also known for its file-based routing system and easy integration with popular tools, making it a popular choice for modern web development.

What is a sitemap and why?
A sitemap is a file that lists all the important URLs of your website, making it easier for search engines like Google to crawl and understand the structure of your site. Sitemaps can also include additional metadata like when a page was last updated, how frequently it changes, and its importance relative to other pages on the site. By generating a dynamic sitemap in Next.js, you ensure that your sitemap automatically reflects any new content, such as blog posts or dynamic routes, keeping search engines up to date and boosting your website's SEO.

How to create?
Create a sitemap.ts or js file in your next js app directory.

Folder structure

Create and export a function named sitemap.

export default function sitemap() {

}
Enter fullscreen mode Exit fullscreen mode

Create one more function to fetch all routes created in your project.

import fs from "fs";
import { MetadataRoute } from "next";
import path from "path";

const baseUrl = process.env.SITE_URL || "http:localhost:3000";
const baseDir = "src/app";
const excludeDirs = ["api", "fonts"];

export const revalidate = 3600 // revalidate at most every hour


async function getRoutes(): Promise<MetadataRoute.Sitemap> {
  const fullPath = path.join(process.cwd(), baseDir);
  const entries = fs.readdirSync(fullPath, { withFileTypes: true });
  let routes: string[] = ["/"];

  entries.forEach((entry) => {
    if (entry.isDirectory() && !excludeDirs.includes(entry.name)) {
      routes.push(`/${entry.name}`);
    }
  });

  return routes.map((route) => ({
    url: `${baseUrl}${route}`,
    lastModified: new Date(),
    changeFrequency: "weekly",
    priority: 1.0,
  }));
}
Enter fullscreen mode Exit fullscreen mode

In the above code block baseDir is the directory where your routes are created that will be mostly app/src. excludeDirs are used to specify which are the directories that need to be excluded while creating our routes array. routes array is the array that includes all our route's names. For eg: ["about", "blog"]

This code will create a sitemap for all static pages. But what if we have dynamic pages like todo/:id? For this, we need to fetch our dynamic data and make its route here, and append it to the routes array. The below function will do that job.

  // to create dynamic routes.
  async function getBlogs() {
    const data = await fetch("https://jsonplaceholder.typicode.com/todos");
    const todos = await data.json();
    console.log(todos, "todos");
    const todoRoutes: string[] = todos.map(
      (todo: any) => `/todo/${todo.id}`
    );
    routes = [...routes, ...todoRoutes];
  }
Enter fullscreen mode Exit fullscreen mode

Now we need to call the getRoutes function from the sitemap function that we created in the beginning. Below is the entire code for the process.

import fs from "fs";
import { MetadataRoute } from "next";
import path from "path";

const baseUrl = process.env.SITE_URL || "http:localhost:3000";
const baseDir = "src/app";
const excludeDirs = ["api", "fonts"];

export const revalidate = 3600 // revalidate at most every hour


async function getRoutes(): Promise<MetadataRoute.Sitemap> {
  const fullPath = path.join(process.cwd(), baseDir);
  const entries = fs.readdirSync(fullPath, { withFileTypes: true });
  let routes: string[] = ["/"];

  entries.forEach((entry) => {
    if (entry.isDirectory() && !excludeDirs.includes(entry.name)) {
      routes.push(`/${entry.name}`);
    }
  });

  // to create dynamic routes.
  async function getBlogs() {
    const data = await fetch("https://jsonplaceholder.typicode.com/todos");
    const todos = await data.json();
    console.log(todos, "todos");
    const todoRoutes: string[] = todos.map(
      (todo: any) => `/todo/${todo.id}`
    );
    routes = [...routes, ...todoRoutes];
  }

  await getBlogs();

  return routes.map((route) => ({
    url: `${baseUrl}${route}`,
    lastModified: new Date(),
    changeFrequency: "weekly",
    priority: 1.0,
  }));
}

export default function sitemap() {
  return getRoutes();
}

Enter fullscreen mode Exit fullscreen mode

Now run the project using

npm run dev
Enter fullscreen mode Exit fullscreen mode

and go to *http://localhost:3000/sitemap.xml * There you can see a XML file that includes the the route names and other options that you set for generating the sitemap.

Generated sitemap.xml file

This post will guide you through creating a dynamic sitemap in Next.js. The logic presented here is tailored to my specific use case, but feel free to adapt it as needed. If you encounter any issues or have suggestions, please don't hesitate to leave a comment. I'm always open to feedback and improvement. Thank you for taking the time to read this!

Top comments (8)

Collapse
 
samurai71 profile image
Mark Landeryou

Very nice article. I am wondering how I would turn the sitemap into a page to be displayed on the site. Any suggestions on how to accomplish this?

Collapse
 
shafayeat profile image
Shafayet Hossain

Here are 2 suggestions from my experience:

Interactive Sitemap: You could create a page that not only lists the URLs but also lets users filter or search through the routes. For example, adding a search bar or category filter would help users quickly find specific sections of the site, which can be especially useful if your sitemap is large.

HTML & XML View Toggle: Another option is to add a toggle on your sitemap page to switch between an HTML view (with clickable links) and the raw XML version. This provides flexibility for both regular users and technical users who might prefer the XML format.

Both approaches can make the sitemap more practical and user-friendly!

Collapse
 
aswanth_raveendranek_a2a profile image
Aswanth Raveendran EK • Edited

Thanks for reading the article.
In case of next js. It will do the work by itself. It will run the script in a sitemap and an XML file will be created.

Collapse
 
wiscaksono profile image
Wisnu

here is how i achieve sitemap, not really dynamic but yeah it works, here is the site, wiscaksono.com

import { ENV } from '@/lib/constants'
import { getContents } from '@/lib/contents'

export default async function sitemap() {
  const URL = ENV.NEXT_PUBLIC_WEBSITE_URL

  const aboutRoutes = getContents('abouts').map(route => ({
    url: `${URL}/abouts/${route.slug}`,
    lastModified: new Date().toISOString().split('T')[0]
  }))

  const projectsRoutes = getContents('projects').map(route => ({
    url: `${URL}/projects/${route.slug}`,
    lastModified: new Date().toISOString().split('T')[0]
  }))

  const articleRoutes = getContents('articles').map(route => ({
    url: `${URL}/articles/${route.slug}`,
    lastModified: new Date().toISOString().split('T')[0]
  }))

  return [...routes, ...aboutRoutes, ...projectsRoutes, ...articleRoutes]
}

Enter fullscreen mode Exit fullscreen mode
Collapse
 
aswanth_raveendranek_a2a profile image
Aswanth Raveendran EK

This looks nice. Thanks for sharing.

Collapse
 
eshimischi profile image
eshimischi
Collapse
 
ka0sdev profile image
ka0sdev

Seems excessive to add another dependency package to a project, when it can be done without it.

Collapse
 
eshimischi profile image
eshimischi

It’s not, community “standard” library for sitemaps in Next.js