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.