SEO for Next.js: Generating a Dynamic Sitemap
By: Niharika Khanna
Tags: JavaScript, Front End Development, React, Nextjs, SEO

Step 1: Setup and project structure

If you don’t already have a Next.js project setup, you can setup a starter by following the instructions on the official Next.js tutorial.

Most Next.js websites have static and dynamically generated pages living inside the pages directory. To read these page names we will install globby — an NPM package that can traverse the file system and return pathnames.

yarn add --dev globby

That’s the only external dependency we will need for our sitemap generation script.

There are two parts to creating a sitemap. Let’s have a look at a standard Next.js project structure.

|- pages/

|- about.js # about page

|- blog/ # blog folder

|- index.js # default blog

|- [id].js. # dynamically generated blog posts |- components/

|- MainComponent.jsx # Main component

|- OtherComponents.jsx # Other component

Firstly, our script needs to traverse the file system and find the names of the static files (in this case, about.js, and the two index.js files). Secondly, we need to add all our dynamic pages ([id].js) to our sitemap. Traversing the file system will not work in this case as we will have to know all the urls of our pages. We will tackle this in Step 3. First, we generate a sitemap for all our static pages.

Step 2: Writing a script that generates a sitemap

Once we have our basics setup, we can now write a small script to generate a sitemap. I have written mine in utils/sitemap.js but feel free to pick a folder of your choice! The following script will then convert all our static files to pathnames and then dump them into a xml file which will be able to be accessed in our public directory at public/sitemap.xml .

I’ve added some comments to the gist which further explain what is going on.

In short, we use globby to get the pathnames from our directories (ignoring our api routes and other pages that we don’t want to include in our sitemap). Then, we map through these and generate an entry in the form of <url><loc></url> for each of these. Simple!

Step 3: Update next.config.js to run the script at build time

Now that we have written our initial script, we need to update our webpack configuration in our next.config.js file to generate the sitemap at build time. Make sure to update your file path according to your project structure! Now when you run yarn dev or npm run dev , you should get a sitemap.xml file generated in your public/ folder.

module.exports = {

webpack: (config, { isServer }) => {

if (isServer) {

require('./src/utils/sitemap.js')

}

return config

}

};

Step 4: Handle dynamic pages (or pages that are generated via an external api)

One of the key features of Next.js is the ability to generate dynamic pages. We have not accounted for these dynamic pages in our original script, but it is quite straightforward to add. Implementation will differ based on the source of the slugs used to generate the urls of your dynamic pages. If your pages are fetched from an external api or CMS (for example, Contentful) then you will have to fetch the [id] params of these pages before you can generate a sitemap for them.

You might store these in a database, directly source them from a CMS or have a list of page names in a json file — but the idea remains the same, to query this list and map the names to form a <loc> instance in the sitemap file. Easy!

For this example, we will be using an external api. There’s an excellent api for mock data available at https://jsonplaceholder.typicode.com/. We will be querying the fake posts and using the ids from these posts to generate our pages.

The final code should look something like this, with explanation following.

In short, we fetched a list of sample posts from our external source and mapped them to generate their respective urls paths. Now, if you run npm run dev or yarn dev you should get a new file public/sitemap.xml which will hold the contents of your sitemap.

Once you have deployed your website your sitemap will then become accessible at https://YOUR_URL/sitemap.xml and you can use your unique link to submit your sitemap to the various search engines (for example, in Google’s Search Console).

And that is all folks! We’ve managed to create a sitemap for both our statically written and dynamically generated pages! Now, whenever you add new pages whether statically written or dynamically generated, and a new build is triggered, your sitemap will be auto updated and search engines will be able to crawl them effectively. Happy Coding!