## Let us first understand the complete logic

Befor going further it is important to have a understanding of **getServerSideProps**  also know as **SSR** with respect to Next.Js and also have a understanding of Node.Js

**The process is** -
- Next.Js provides a feature and we don't have to install any additional packages.
- We have to create a file in **pages** directory and use SSR to fetch all the routes present in the application.
- The file mentioned above will dynalically generate sitemap.xml file on request, and when user or  search engine tries to read our sitemap, it will always show the most updated file.
- The backend can be any system where we can do  a api request to get data from.
 
You can see this official Next.Js document on sitemap, here is the [link](https://nextjs.org/learn/seo/crawling-and-indexing/xml-sitemaps)

We will follow the Google recommended way to  structure our sitemap.xml, here is the [link](https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap)  

Here is the screenshot of the same -
![google sitemap.jpg](https://api.ranuvijay.me/uploads/google_sitemap_f31aae2a67.jpg)

### I will explain with respect to this particular application

It will be easy for me explain in detail and also for users reading this to see a practical working of dynamically generated sitemap.xml.

**About this App** -

- If you  check my this application I have **Three Types** of routes which are dynamically generated
- I have **Categories**, **Topics** and **Blogs**
- I create all of these 3 things dynamically, means I create categories, topics and blogs on the go.
- A new URL, route is then dynamically generated.

#### Let us now see how to generate dynamic sitemap.xml

The first step is to create a file named as **sitemap.xml.js** in our pages directory, it should be directly accessible with domainName/sitemap.xml and then write code as -


-  Create a component - 
```
function SiteMap() {
}
```
- Default export It - 

```
export default SiteMap;
```
- Create **getServerSideProps** method to get list of url available-

    - Note that I have 3 types of dynamic url so I create 3 functions to get my urls.

    - The url comes from any backend system that we uses, so we will make a request to get list of urls.

```
export async function getServerSideProps({ res }) {

  let categoriesPaths, topicPaths, blogPaths;
  
  const result = await axios.get(
     "http://localhost:1111/api/categories/?fields[0]=slug"
  );
  const data = result.data.data;
  categoriesPaths = data.map((each) => ({
     params: { categoryslug: each.attributes.slug },
  }));
 
  const topicResult = await axios.get(
     "http://localhost:1111/api/topics/?fields[0]=slug"
  );
  const topicData = topicResult.data.data;
  topicPaths = topicData.map((each) => ({
     params: { topicslug: each.attributes.slug },
  }));
  
  const blogResult = await axios.get(
     "http://localhost:1111/api/blogs/?fields[0]=blogSlug"
  );
  const blogData = blogResult.data.data;
  blogPaths = blogData.map((each) => ({
     params: { blogslug: each.attributes.blogSlug },
  }));
  
  const sitemap = generateSiteMap(categoriesPaths, topicPaths, blogPaths);

  res.setHeader("Content-Type", "text/xml");
  // we send the XML to the browser
  res.write(sitemap);
  res.end();

  return {
    props: {},
  };
}
```

- Do check from above code that we called a function named as **generateSiteMap** and passed the three list of dynamic urls.
- GenerateSiteMap method will generate all the content of sitemap.xml file, I will write the details below.
- We then set the header of the file to be of type text/xml.
-  We then programaticcaly write the response of the generateSiteMap in the file and that is all we have to do.
- It is also important to handle the errors, if in case we get during axios call, which I'm not doing here.
- I hope you can understand why no props is passed to the component :)
- Also, as we can see, I have only requested all the **slug fields**  of urls.

#### Let us now write our generateSiteMap method -

- We will have to manually write all the static url.
- As I have only slug field, I have manually imported my 3 types of url, will  join these urls with dynamically generated slugs so that we can get a complete dynamic urls. 

```
const CategoryUrl = "https://www.ranuvijay.me/blogs/categories";
const TopicUrl = "https://www.ranuvijay.me/blogs/topics";
const BlogUrl = "https://www.ranuvijay.me/blogs";

function generateSiteMap(categories, topics, blogs) {

  return `<?xml version="1.0" encoding="UTF-8"?>
   <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <url>
       <loc>https://www.ranuvijay.me</loc>
     </url>
     <url>
       <loc>https://www.ranuvijay.me/blogs</loc>
     </url>
     ${categories
       .map((d) => {
         return `
       <url>
           <loc>${`${CategoryUrl}/${d?.params?.categoryslug}`}</loc>
       </url>
     `;
       })
       .join("")}
       ${topics
         .map((d) => {
           return `
        <url>
            <loc>${`${TopicUrl}/${d?.params?.topicslug}`}</loc>
        </url>
      `;
         })
         .join("")}

         ${blogs
           .map((d) => {
             return `
         <url>
             <loc>${`${BlogUrl}/${d?.params?.blogslug}`}</loc>
         </url>
       `;
           })
           .join("")}

     <url>
        <loc>https://www.ranuvijay.me/aboutApp</loc>
     </url>
     <url>
         <loc>https://www.ranuvijay.me/contactMe</loc>
     </url>
     <url>
         <loc>https://www.ranuvijay.me/becomeWriter</loc>
     </url>

     </urlset>
 `;
}
```


The complete code of **sitemap.xml.js** file will be  - 


```
const CategoryUrl = "https://www.ranuvijay.me/blogs/categories";
const TopicUrl = "https://www.ranuvijay.me/blogs/topics";
const BlogUrl = "https://www.ranuvijay.me/blogs";
import axios from "axios";

function generateSiteMap(categories, topics, blogs) {
  // console.log("categories", categories);
  return `<?xml version="1.0" encoding="UTF-8"?>
   <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <url>
       <loc>https://www.ranuvijay.me</loc>
     </url>
     <url>
       <loc>https://www.ranuvijay.me/blogs</loc>
     </url>
     ${categories
       .map((d) => {
         return `
       <url>
           <loc>${`${CategoryUrl}/${d?.params?.categoryslug}`}</loc>
       </url>
     `;
       })
       .join("")}
       ${topics
         .map((d) => {
           return `
        <url>
            <loc>${`${TopicUrl}/${d?.params?.topicslug}`}</loc>
        </url>
      `;
         })
         .join("")}

         ${blogs
           .map((d) => {
             return `
         <url>
             <loc>${`${BlogUrl}/${d?.params?.blogslug}`}</loc>
         </url>
       `;
           })
           .join("")}

     <url>
        <loc>https://www.ranuvijay.me/aboutApp</loc>
     </url>
     <url>
         <loc>https://www.ranuvijay.me/contactMe</loc>
     </url>
     <url>
         <loc>https://www.ranuvijay.me/becomeWriter</loc>
     </url>

     </urlset>
 `;
}

function SiteMap() {
  // getServerSideProps will do the heavy lifting
}

export async function getServerSideProps({ res }) {

  let categoriesPaths, topicPaths, blogPaths;
  
  const result = await axios.get(
     "http://localhost:1111/api/categories/?fields[0]=slug"
  );
  const data = result.data.data;
  categoriesPaths = data.map((each) => ({
     params: { categoryslug: each.attributes.slug },
  }));
 
  const topicResult = await axios.get(
     "http://localhost:1111/api/topics/?fields[0]=slug"
  );
  const topicData = topicResult.data.data;
  topicPaths = topicData.map((each) => ({
     params: { topicslug: each.attributes.slug },
  }));
  
  const blogResult = await axios.get(
     "http://localhost:1111/api/blogs/?fields[0]=blogSlug"
  );
  const blogData = blogResult.data.data;
  blogPaths = blogData.map((each) => ({
     params: { blogslug: each.attributes.blogSlug },
  }));
  
  const sitemap = generateSiteMap(categoriesPaths, topicPaths, blogPaths);

  res.setHeader("Content-Type", "text/xml");
  // we send the XML to the browser
  res.write(sitemap);
  res.end();

  return {
    props: {},
  };
}

export default SiteMap;
```

I hope I have covered each part and if there is a need for improvement, do write to me, I will try to solve.

Find [other blogs](https://www.ranuvijay.me/blogs/categories/next-js) on next.js

Find other [topics](https://www.ranuvijay.me/blogs#topics) and [technical solutions](https://www.ranuvijay.me/blogs#topics)

Find  [blogs](https://www.ranuvijay.me/blogs#categories) on other Categories
 
**Thank You !!**

Sitemap.xml is an important file for SEO. In a large project, new routes and pages are dynamically generated, we will see how we can generate dnamic sitemap for next.js

Dynamically generate sitemap.xml for next.js application

Contact Me

I want to hear from you