Create a Sitemap for static NextJs Projects within Minutes

Creating a sitemap for your NextJS exported project can be done very easily, in fact, it is how developright.co.uk generates its sitemap. The package we will be using is called nextjs-sitemap-generator and after a little configuration, it can be set up to work with your NextJs project. 

Once configured I will run a javascript file using node that will generate the sitemap based on valid html values within the directory that is configured to be looked at. By default this will create the sitemap.xml file with in the folder you have targeted.

The first thing you will need to do is to install the package, you can use yarn or npm but in this case, the example will be with npm

npm install --save nextjs-sitemap-generator

To ensure that the necessary files exist within the out folder run the following commands as this will ensure that NextJs application has built and exported the project. You should see html files in the folder. 

next build && next export

Now that you have set up the sitemap to be used with your nextjs project you can run the file that you have created by typing the following. If you have changed the path of where the file is stored you will need to update the command.

Now that the package is installed and the necessary files have been created, create a file named scripts/sitemap-generator.js. Within this file we will configure the package so that it will create a sitemap for www.example.com. See the following snippet.

const sitemap = require('nextjs-sitemap-generator');
const fs = require('fs');
const path = require('path');

sitemap({
  baseUrl: "https://www.example.com",
  pagesDirectory: path.resolve(__dirname, '../out/'),
  targetDirectory:path.resolve(__dirname, '../out/'),
  ignoredExtensions: ["js", "map", "json", "xml", "png", "jpg", "jpeg", "svg"],
  ignoredPaths: ["[fallback]"],
  allowFileExtensions: true
});

You can check the arguments the sitemap package currently takes by following this link.

For now, I will explain the relevant parameters. baseUrl is prepended to any paths that are found, this means that if /index.html was found the given baseUrl parameter will be prepended so using the example above /index.html would then be https://www.example.com/index.html. 

pagesDirectory is the property that is used by the package to look for files to add into the sitemap since the parameter is a given directory within the file system. Using the ignoredExtensions property you can ensure only the file type(s) you desire are added into the sitemap.

The targetDirectory is the parameter that tells the package where to write the sitemap file to. In the example above we are writing the sitemap in the same folder we looked for files in.

The following property may be optional but in most cases it will be required. If you need your files to end with the correct extension, /example-page is /example-page.html, then you will need to set the allowFileExtensions property to be true. This will ensure that the sitemap package keeps file extension

Finally, the following command will run the file you have created, use the sitemap package that you have configured, and you should now see the sitemap.xml file that consists of your pages.

node scripts/sitemap-generator.js

Check your out directory, you should now see a sitemap generated with the valid paths and extensions you have permitted in the package configuration.