## 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](/sitemap.xml)

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](/assets/blog/helpers/sitemap-file-created.JPG)

```javascript
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);
}
```


```javascript
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 <code>getAllUrls()</code> 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,

```javascript

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 :)


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.

More Stories related to 'sitemap'

Also read the similar topics