Generate a sitemap for a static site using Next.js
In my blog I'm using the package nextjs-sitemap-generator:
npm i -D nextjs-sitemap-generator
Its documentation is a little bit confusing, but a very basic sitemap can be generated this way. Create a script somewhere in your application, in my case it is inside utils/sitemap.js (hence the .. for the pagesDirectory).
const sitemap = require('nextjs-sitemap-generator')
const chalk = require('chalk')
const targetDirectory = 'public'
sitemap({
baseUrl: 'https://estevanmaito.me',
pagesDirectory: __dirname + '\\..\\pages',
ignoreIndexFiles: true,
targetDirectory: targetDirectory,
pagesConfig: {
'/blog': {
priority: '1',
changefreq: 'daily',
},
},
})
console.log(chalk.green(`Sitemap generated and available at /${targetDirectory}`))
In my case I wanted wanted a specific priority and changefreq from the /blog route, so I added it under pagesConfig. Note: chalk is used here only to add colors to the terminal messages and is completely optional (as is the console.log).
To run generate the sitemap, I added a script under scripts inside package.json called prebuild, that is called before build:
"prebuild": "node utils/sitemap.js",
It will generate the sitemap inside public folder (but you can change it).