> I will not mention about sitemap.xml's or SEO. You can get details from Google, [here](https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap). Captain Obvious, 2023

Assuming As you are already familiar with **Next.js**, I'm sure you are already cereate your blog posts or contents using **markdown** or **MDX**.

## How to Add Sitemaps to a Next.js Project

There is two methods for this. First of all, manually, like this:

```JS
   
   <xml version="1.0" encoding="UTF-8">
   <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <url>
       <loc>http://www.example.com/foo</loc>
       <lastmod>2021-06-01</lastmod>
     </url>
   </urlset>
   </xml>
```

> Which is not ideal! 😭

Second methods is using `getServerSideProps` by creating a file called `pages/sitemap.xml.js`

```JS
//pages/sitemap.xml.js
const EXTERNAL_DATA_URL = 'https://jsonplaceholder.typicode.com/posts';

function generateSiteMap(posts) {
  return `<?xml version="1.0" encoding="UTF-8"?>
   <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     
     <url>
       <loc>https://jsonplaceholder.typicode.com</loc>
     </url>
     <url>
       <loc>https://jsonplaceholder.typicode.com/guide</loc>
     </url>
     ${posts
       .map(({ id }) => {
         return `
       <url>
           <loc>${`${EXTERNAL_DATA_URL}/${id}`}</loc>
       </url>
     `;
       })
       .join('')}
   </urlset>
 `;
}

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

export async function getServerSideProps({ res }) {
  // We make an API call to gather the URLs for our site
  const request = await fetch(EXTERNAL_DATA_URL);
  const posts = await request.json();

  // We generate the XML sitemap with the posts data
  const sitemap = generateSiteMap(posts);

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

  return {
    props: {},
  };
}

export default SiteMap;

```

<hr/>

## How about MDX files?

This is the tricky part. Assuming yourt MD or MDX content file tree like that:

```JS
.
├── components
│   ├── Footer.js
│   └── Header.js
├── contents
│   ├── about-us
│   │   └── index.md
│   ├── blog
│   │   ├── first-post.md
│   │   ├── second-post.md
│   │   └── third-post.md
│   └── index.md
```

You have to get this MD or MDX files through your API.

Create a new Pages API file like this, `pages/api/pages.js`

```js
//pages/api/pages.js
import fs from "fs";
import path from "path";

export function getPages() {
  const pagesDirectory = path.join(process.cwd(), "content");
  const slugs = fs
    .readdirSync(pagesDirectory)
    .filter((file) => file.endsWith(".md") && !file.startsWith("_"))
    .map((file) => {
      const slug = file.replace(".md", "");
      return {
        slug,
        path: `${slug}`,
      };
    });
  return slugs;
}

export default function handler(req, res) {
  const pages = getPages();
  res.status(200).json(pages);
}
```

In this, we'll get all MD or MDX files, that generated when building your Next.js app, and then push to API response directly.

Your API response should be like that:

![nextjs api response](https://res.cloudinary.com/raufsamestone/image/upload/v1682957175/blog-contents/next-js-sitemap/wanbaiklefoil0suwhey.png)

Then finally, we can update our `sitemap.xml.js` file like this:

```JS
import { getPages } from "./api/pages";

function generateSiteMap(pages) {
  const siteUrl = "https://example.com";
  return `<?xml version="1.0" encoding="UTF-8"?>
     <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
       
       <url>
       <loc>${`${siteUrl}/about`}</loc>
       </url>
       ${pages
         .map((page) => {
           return `
         <url>
             <loc>${`${siteUrl}/${page.path}`}</loc>
         </url>
       `;
         })
         .join("")}
     </urlset>
   `;
}

function Sitemap() {
  // Just a placeholder component, since we're not rendering anything
  return null;
}

export async function getServerSideProps({ res }) {
  const pages = getPages(); // Make sure to await the response
  const sitemapXml = generateSiteMap(pages);

  res.setHeader("Content-Type", "text/xml");
  res.write(sitemapXml);
  res.end();

  // Return an empty props object, since we're not rendering any content
  return {
    props: {},
  };
}

export default Sitemap;
```

Congrats! 🎊

Here is the our final XML:

![next js sitemap xml](https://res.cloudinary.com/raufsamestone/image/upload/v1682958711/blog-contents/next-js-sitemap/exov9p0boigpmmczkyxy.png)

<hr/>

You can see the more detailed info about _Sitemaps_ on Nextjs [here](https://nextjs.org/learn/seo/crawling-and-indexing/xml-sitemaps).

<hr/>

Happy coding. 🪄