Next.js Site map

Next js sitemap is a pretty simple concept. In a nutshell, a Site map is a file that contains a data representation of each page within your website, along with any other content deemed important enough to specify to search engines such as Google. Next.js makes this very easy to implement.

Sitemap entries can include, but are not limited to, videos, images, PDFs, and of course the web pages themselves. The most common format for a sitemap file is XML, and although Google supports other formats such RSS and Text, we’ll be focusing on the XML format due to its prevalent usage.

TL;DR: Quick Links

Sitemap Maintenance | Keeping URLs up to Date

Maintaining a sitemap manually can be a very tedious endeavor. Every time a new page or piece of content is added to a site, or a URL changes, the sitemap file must be updated as well. This can become unmanageable, especially when maintaining medium to large sized sites.

For this reason, frameworks usually offer some tooling to facilitate the task of maintaining sitemaps. Usually, this comes in the form of a sitemap generator, which allows the developer or maintainer to generate sitemaps automatically, or generate them as needed when updates are made.

NextJs | Sitemap Generator vs Dynamic Sitemap

The difference between these two techniques is subtle but important to understand. Each technique may or may not be optimal for Next SEO depending on your particular situation.

Using NextJs, a sitemap generator creates an actual sitemap file to be served out from the /public directory as a static file.

In contrast, a dynamic sitemap uses a page component to generate an object containing the sitemap schema on the fly, and attaches it to the response body. In essence, a NextJs component is used to mimic an actual sitemap file.

next-sitemap | Capable for Both Occasions

The next-sitemap module comes equipped to act as either a sitemap generator, or as a tool for building dynamic sitemaps. Later on, we’re going to look under the hood at how this works. But first, let’s look at a simple implementation with next-sitemap.

Generating sitemap.xml Files With next-sitemap

Once you have a NextJs project up and running, go ahead and install next-sitemap with the following command:

npm i next-sitemap

The next-sitemap module requires a configuration file. So, in the root of your project, create a file called next-sitemap.config.js and add the following code:

const config = {
    siteUrl: 'https://yoursite.com',
    generateRobotsTxt: true, // (Optional parameter for creating robots.txt file)
    // Other available options..
  }
 
module.exports = config;

With our module installed and configuration file in place, let’s go ahead and run a build on our project.

npm run build

The NextJs docs recommend adding a `postscript` to the package.json file. So, let’s go ahead and follow their lead by adding this code to package.json:

"postbuild": "next-sitemap"

Now, we’re ready to build our sitemaps! Run the following command, and let’s check out what happens:

npm run postbuild

Assuming this command executed without error, you should see some output indicating that your two sitemap files have been built: sitemap.xml and sitemap-0.xml

But why two sitemaps? sitemap.xml acts as a reference to all other sitemaps, this way if you have a website with lots of pages (in the thousands if not millions), you can break up your sitemaps into multiple smaller files, which load and can be crawled more efficiently.

Here’s a look inside the sitemap.xml that we just generated:

<?xml version="1.0" encoding="UTF-8"?>

<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
        <sitemap>
                <loc>https://example.com/sitemap-0.xml</loc>
        </sitemap>
</sitemapindex>

As you can see, this file simply references the sitemap-0.xml file, which contains our actual pages. Search engines will readily crawl this sitemap configuration, and on modern websites this method of breaking up sitemaps into multiple files is quite common.

Dynamic Sitemaps With next-sitemap

Using next-sitemap for dynamic sitemaps isn’t quite as simple as generating sitemap files, but the process is still fairly streamlined. Basically, all pages in a NextJs site are served out in the /pages directory. So, we’ll create a sitemap page component that “acts” like a sitemap.xml file.

We need to import the `getServerSideSitemap` method from the next-sitemap module, and build a page component that doesn’t return any JSX. Instead, the page component will run some code inside the `getServerSideProps` method.

Here’s a look at a basic sitemap component that can accomplish this:

import { getServerSideSitemap } from 'next-sitemap';
 
function GenSitemap() {
}
 
export async function getServerSideProps({ ctx }) {

// We could place code here that fetches pages from a CMS to build a dynamic sitemap.
  return getServerSideSitemap(ctx, [
    {
      loc: 'https://example.com',
      lastmod: new Date().toISOString(),
      changefreq: “monthly”,
      priority: “1”
    },
    {
      loc: 'https://example.com/dynamic-path-2',
      lastmod: new Date().toISOString(),
      changefreq: “monthly”,
      priority: “1”
    },
  ])
 
}
 
export default GenSitemap;

As can be seen in the above code, we return our imported `getServerSideSitemap` method from `getServerSideProps`, and pass it an array containing all the data related to building our sitemap.

And that’s it, next-sitemap handles the rest behind the scenes!

Building a Custom sitemap Generator with NextJs

The process of building your sitemap files is abstracted by the next-sitemap module. This makes implementing sitemaps with NextJs a fairly simple process.

However, it’s a good idea to understand how things operate, so let’s look at a basic example of how we can generate sitemap files by leveraging the NodeJs platform that lives underneath the Next framework.

The Typical sitemap Schema

Our goal here is to generate a sitemap.xml file. So, what’s a sitemap file look like? A typical schema for a sitemap xml file will look something like this:

<url>

    <loc>http://example.com/blog</loc>
    <lastmod>date created</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>

</url>

Let’s see how we can create a file containing this schema using some back-end Javascript code while tweaking the webpack configuration.

Modifying the NextJs Config file to Run the sitemap Script

NextJs uses webpack to bundle up and/or require modules, which we can tap into using our NextJs configuration file. Let’s modify the NextJs config file to require a script that builds a sitemap file each time it runs on the server. We can modify our `next.config.js` like so:

module.exports = {
...
  webpack: (config, { isServer }) => {
    if (isServer) {
      require("./server-scripts/sitemap-generator");
    }
    return config;
  },
};

Webpack runs twice, once on the server and once on the client. The `isServer` parameter allows us to only run a script when webpack is running on the server. Therefore, our sitemap-generator script will run each time our scripts are bundled during a request.

Creating a NextJs Server-Side sitemap Script

Utilizing NextJs on the server allows us to use features within NodeJs, such as the native `fs` module used for modifying the file system. Using the `fs` module, we can traverse the /pages directory, and generate a sitemap file based on its contents. A basic example could look something like this:

sitemap-generator.js

const fs = require('fs');

function genSiteMap() {
            const files = fs.readdirSync(‘/pages’);
             const url = process.env.WEBSITE_URL;
 
             let sitemap = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">`;
             for (var i = 0; i < files.length; i++) {
                    let fileName = files[i]);
                    let formattedFileName = fileName.replace(/\.[^/.]+$/, "");
                    sitemap = sitemap + `<loc>${url}${formattedFileName}</loc>` +
                                                         `<lastmod>${new Date().toISOString()
</lastmod>` +
                                                         ‘<changefreq>weekly</changefreq>’ +
                                                         ‘<priority>1.0</priority>’;
             };
             sitemap = sitemap + ‘</urlset>`
             fs.writeFileSync('public/sitemap.xml', sitemap)
}

genSiteMap();

This example code will iterate over all files in the /pages, and populate a variable formatted with all of the necessary schema for our sitemap.xml file. We then use this variable as a parameter with the `writeFileSync` method to create the actual file itself, and place it in the /public directory so NextJs will serve this out as a static file.

This code is very much barebones, but it serves as a good example for understanding how to leverage NodeJs functionality within NextJs to create sitemap files on the fly.

How Does next-sitemap Create Dynamic Sitemaps?

Without getting too in depth, it’s worth taking a look at how next-sitemap is able to generate these dynamic sitemaps from a regular NextJs page component. The answer lies in the fact that NextJs can render components on the server, which means we can hijack some NodeJs functionality.

Every request made to a site built on the NodeJs platform requires Node to build a response object. This response object can be modified as needed, and this is what next-sitemap uses to inject our sitemap data into the response body.

Here’s a basic look at how the response object can be modified within a NextJs component:

function GenSitemap() {
}
 
export async function getServerSideProps({ res }) {
            // Code to build sitemap content would go here.
            const sitemapContent = MethodToBuildSitemap();
            res.setHeader('Content-Type', 'text/xml');
             res.write(sitemapContent);
 
             res.end();
 
            return {
                        props: {}
            }
}

As you can see, we were able to simply pass the response object into the `getServerSideProps` method, then write some sitemap data to the response body. Cool, now whenever this page is requested, a dynamic sitemap could be built on the fly.

NextJs and next-sitemap | Overview and Concluding Thoughts

NextJs can be used to generate sitemap files, or create dynamic sitemaps that render each time a page component is requested. The next-sitemap module was built to streamline this process, and can be included in any NextJs app using your preferred package manager.

Although using next-sitemap abstracts away much of the technical difficulty in creating sitemaps for your Next app, it’s still a good idea to understand how the process works under the hood. For this reason, we took a quick glance at how NextJs is able to accomplish each form of sitemap creation.

If you’re interested in creating performant SEO with the NextJs framework, having a good handle on your sitemap situation is a must. This article was created to offer guidance and understanding in this area, and we highly recommend creating a NextJs app and trying it out yourself.