I last wrote about how to create a sitemap for a website in your NextJS project. In this blog, I will explain how you can automate the process of creating a sitemap using the next-sitemap package.
In previous blog, we created a sitemap manually by writing the XML code for the sitemap. But this article will focus on automating the process of creating a sitemap.
Link to the previous blog: Create Sitemaps in NextJS in 2mins
About next-sitemap NPM Package📦
next-sitemap is a package created and maintained by Vishnu Sankar and its the most popular package for generating sitemaps in NextJS with over 3.4k stars on GitHub.
Purpose of this package is fairly simple, but very important if you are looking to improve the SEO of your website. check below the self defined purpose of the package.
Sitemap generator for next.js. Generate sitemap(s) and robots.txt for all static/pre-rendered/dynamic/server-side pages.
Table of Contents
Lets get started🚀
Step 1: Install the package
npm install next-sitemap
Step 2: Create a next-sitemap.config.js file in the root of your project
Keep name of the file
next-sitemap.config.jsas it is, otherwise it will not work.
/** @type {import('next-sitemap').IConfig} */
module.exports = {
siteUrl: process.env.SITE_URL || 'https://example.com',
generateRobotsTxt: true, // (optional)
// ...other options
}
Step 3: Add the following script in your package.json
"scripts": {
"build": "next build",
"postbuild": "next-sitemap"
}
Caution: When using
pnpmyou need to create a .npmrc file in the root of your project if you want to use a postbuild step or else you just need define build asbuild: "next build && next-sitemap", clear lets move on.
Step 4: Run the build command
npm run build
Step 5: Check the sitemap.xml file in the root of your project
| app
| /pages
| /public
| /sitemap.xml
| /robots.txt
on successful build, you will see a sitemap.xml and robots.txt file in the root of your project. If you dont want robots.txt file, you can set generateRobotsTxt: false in the next-sitemap.config.js file. If you allow me I would like to explain customization can do with sitemap.xml with config file.
Pro Developer Configurations😎
Welcome to the pro developer configurations, where you can customize the sitemap.xml file as per your requirements. Kudos for making it this far, lets get started.
How to url configuration in sitemap.xml
By default, the package will assign same priority to all pages, but I want priority of home page to be 1.0 and other pages to be 0.8. I can do that by adding the following code in the next-sitemap.config.js file.
module.exports = {
siteUrl: process.env.SITE_URL || 'https://example.com',
changefreq: 'daily',
// here is the new code
priority: 0.8,
sitemapSize: 5000,
generateRobotsTxt: true,
transform: async (config, path) => {
let priority = config.priority
let changefreq = config.changefreq
// Set higher priority for home and team pages
if (path === '/') {
priority = 1.0 // Highest priority for the homepage
changefreq = 'hourly' // Change frequency for the homepage, hourly is just an example consult the sitemap documentation or your SEO expert
}
return {
loc: path, // => this will be exported as http(s)://<config.siteUrl>/<path>
changefreq: config.changefreq,
priority: priority, // Dynamic priority based on the page
lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
alternateRefs: config.alternateRefs ?? [],
}
},
}
How to exclude pages from sitemap.xml
For example on ChakraFramer website, I dont want to include the /blank/* like this in the sitemap.xml file. I can do that by adding the following code in the next-sitemap.config.js file.
module.exports = {
siteUrl: process.env.SITE_URL || 'https://example.com',
changefreq: 'daily',
priority: 0.8,
sitemapSize: 5000,
generateRobotsTxt: true,
transform: async (config, path) => {
let priority = config.priority
let changefreq = config.changefreq
// Set higher priority for home and team pages
if (path === '/') {
priority = 1.0 // Highest priority for the homepage
changefreq = 'hourly' // Change frequency for the homepage, hourly is just an example consult the sitemap documentation or your SEO expert
}
return {
loc: path, // => this will be exported as http(s)://<config.siteUrl>/<path>
changefreq: config.changefreq,
priority: priority, // Dynamic priority based on the page
lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
alternateRefs: config.alternateRefs ?? [],
}
},
// here is the new code
exclude: ['/blank/*'],
}
Full Configuration Options
If you do like to see all the configuration options, you can check the official documentation
Conclusion
In this blog, I explained how to automate the process of creating a sitemap using the next-sitemap package. I also explained how to customize the sitemap.xml file as per your requirements. I hope you found this blog helpful. But if next-sitemap does not allow you to customization you need, you can always create the sitemap manually as explained in the previous blog or my next blog on custom postbuild script.
Get in touch
| Platform | Handle |
|---|---|
| Youtube | @thesohailjafri |
| X/Twitter | @thesohailjafri |
| @thesohailjafri | |
| @thesohailjafri | |
| Github | @thesohailjafri |
Top comments (3)
Great Article !!!!!
Fantastic package. Using it in quite a few of my NextJS projects.
Actually. it does most things you would need for sitemap. Currently trying to figure out a way to configure name of sitemap.xml and sitemap-0.xml is by default generated. even splitting sitemaps. I will update the articles once I find those.