How to Generate Sitemap in Next.js

Having a sitemap is crucial for any website. It helps search engines like Google, Bing etc. to understand the structure of your site and index it more effectively. In this post, I'll share how we can generate the sitemap in Next.js using the next-sitemap package. The next-sitemap package is a popular choice for generating sitemaps in Next.js applications. It provides a simple and easy-to-use cli that allows you to generate a sitemap for your Next.js application.

Just for the context, this blog uses Next.js 15 with MDX support to manage the content and I have been using the next-sitemap package to generate the sitemap for this blog.

Installation

To get started, you need to install the next sitemap package in your Next.js application. You can do this by running the following command:

npm install next-sitemap

Feel free to use your favorite package managers like pnpm, yarn, bun etc to install the package. Once the package is installed, create the next-sitemap.config.js file in the root of your project. This file will contain the configuration for generating the sitemap. Below is the sample configuration that you can use:

export default {
	siteUrl: "https://anujsubedi.com.np", 
	generateRobotsTxt: true,
	sitemapSize: 5000,
};

You can also have the same configuration in common js format:

module.exports = {
	siteUrl: "https://anujsubedi.com.np", 
	generateRobotsTxt: true,
	sitemapSize: 5000,
};

In the above configuration, you need to provide the siteUrl of your website. This is the base URL of your website where the sitemap will be generated. You can also set the generateRobotsTxt to true if you want to generate the robots.txt file along with the sitemap. The sitemapSize option allows you to set the maximum number of URLs that can be included in the sitemap. If the number of URLs exceeds this limit, the sitemap will be split into multiple files.

Generating the sitemap

Once you have configured the next-sitemap.config.js file, it's time to run the command to generate the sitemap. You can do this by adding the following script in your package.json file:

"scripts": {
	"dev": "next dev",
	"build": "next build",
	"postbuild": "next-sitemap --config ./next-sitemap.config.js"
}

If you do not wish to have a separate script, you can also chain the command with the build script:

"scripts": {
	"dev": "next dev",
	"build": "next build && next-sitemap --config ./sitemap.config.mjs",
}

Result

Once you run the build command, the sitemap will be generated in the public directory of your Next.js application. You can access the sitemap by visiting the http://localhost:3000/sitemap.xml route.

If you had enabled the option to generate a robot file, the robots.txt file will also be generated in the public directory of your Next.js application.

Conclusion

Generating a sitemap is an essential step in optimizing your website for search engines. The next-sitemap package makes it easy to generate a sitemap for your Next.js application. By following the steps outlined in this post, you can quickly set up a sitemap for your Next.js application and improve its search engine visibility.