How to setup auto generated sitemap in nextjs

Ullas Kishan

Cover Image for How to setup auto generated sitemap in nextjs

Ullas Kishan

July 30, 2022

3 min read

Introduction

For every website the Sitemap will be playing important role for SEO performance. In Ecommerce and other consumer websites also SEO have important role for developing their revenue. To improve the SEO, the sitemap is helping the search engines to read the root of the websites. Says sitemap would be the index for every websites. It contains all the urls of the websites.

Here we going to discuss how to automate the Sitemap creation when new Url or page being added to the website and this demonstration will be in NextJS.

Lets see the code for how to generate sitemap in NextJS

Getting started

Please click the below url to know how the Sitemap would look like

E.g :- Sitemap of devphobia.com

We can find the sitemap mostly in the place of root folder itself. www.example.com/sitemap.xml

basically sitemap is an XML file it contains Url, modified date and the priority.

In Next.js there are some 3rd party react packages are available to create the sitemap.xml, But in our example we are not going to use any 3rd party packages. Because it is a less time consuming trick.

Demonstration

Create a file name with sitemap.js under the pages folder or where you would like. Place the below code in to the file. create file in pages folder nextjs

export default function handler(req, res) {
  const allUrls = getAllUrls(); // this method should return the Urls from DB or anyother places

  res.statusCode = 200;
  res.setHeader("Content-Type", "text/xml");
  const orginalPath = "https://devphobia.com/posts";

  res.setHeader("Cache-control", "stale-while-revalidate, s-maxage=3600");

  // generate sitemap here
  const xml = `<?xml version="1.0" encoding="UTF-8"?>
      <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> 
      ${allUrls
        .map((url) => {
          return `
            <url>
              <loc>${orginalPath}/${url}</loc>
              <lastmod>${new Date().toISOString()}</lastmod>
              <changefreq>monthly</changefreq>
              <priority>1.0</priority>
            </url>
          `;
        })
        .join("")}
      </urlset>`;

  res.end(xml);
}

const allUrls = getAllUrls(); // this method should return the Urls from DB or anyother places

This line should capture the whole Url(s) and the date (creation date of the article or record). In my case getAllUrls() will provie the list of URLs.

We wrote the code in a response handler so we can provide any type when responding to the request. here the page is responding in the format of XML.

in the next step is assigning the content to the sitemap.xml page.

for that we have to add/create some codes to next.config.js file.

Please find the below snippet,


module.exports = {
  async rewrites() {
    return [
      {
        source: "/sitemap.xml",
        destination: "/sitemap",
      },
    ];
  },
};

The above code will get the sitemap and we can add this to any search engine's webmaster.

Now you no need to add the urls and details manually to the sitemap xml file. This code will create it for you.

Thank You :)

Related tags

nextjs

sitemap

seo

More Stories

Access to fetch domain-ABC from origin domain-XYZ blocked by cors policy

Cross-Origin Resource Sharing (CORS) is a security feature that lets a web page from one domain request resources from a different domain