How To Create NEXTJS sitemap without any libraries

Today we are going to create a NEXTJS sitemap in under 10 minutes!!! (guranteed or your money back)

If you are a next js developer you might have had the great luxury of having a framework that does a lot behind the scenes for you, too bad one of those things is not creating a sitemap, But oh well at least it is a great opportunity to learn about generating xml with javascript.

Honestly I tried using next-sitemap, But my site was really small and the extra config file and all of the setup just really made it the wrong choice so I kept on exploring and found out how to get a sitemap up and running with just one file! So let's get into it

Step 1: Let's Create The File

Inside of your pages directory lets create sitemap.xml.js (or .ts if you swing like that)

// sitemap.xml.js

export default function Sitemap() {
  return null
}

Here we have created a react component that returns nothing.
The reason we are returning null is we have no intention of returning anything from the client, our sitemap will be generated and delivered from the server.

Step 2: Create The getServerSideProps Function

Let's create our getServerSideProps that will get our XML

// sitemap.xml.js

export default function Sitemap() {
  return null
}

export const getServerSideProps = async ({ res }) => {
  res.setHeader("Content-Type", "text/xml")
  const xml = await generateSitemap()
  res.write(xml)
  res.end()
  return {
    props: {},
  }
}

A quick explanation: here we are using the response object to set the header of Content-Type to text/xml

We are calling the generateSitemap function that will be defined on step 3 and saving it in a variable.

Next we are sending that xml to the front using res.write and then we use res.end to end the response process.

Since its NextJs we have to return a props object although its not going to be in use, so we just return empty props.

Step 3: Creating The generateSitemap Function

async function generateSitemap() {
  const res = await axios.get(`yourapiroute`)
  const { items } = res.data

  return `<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
        <url>
            <loc>${BASE_URL}</loc>
            <lastmod>2023-03-03</lastmod>
        </url>
      ${items
        .map(item => {
          return `<url>
        <loc>${BASE_URL}/item/${encodeURIComponent(item.title)}/${
            item._id
          }</loc>
        <lastmod>2023-04-05</lastmod>
    </url>`
        })
        .join("")}
    </urlset>`
}

In this function we get whatever data we need to build the urls on our website (note: your website could be completely different and a different way of getting your urls is needed this is just an example)

and then we render them inside the xml string on our website and TADA we have an XML sitemap without libraries, your not getting your money back 😉.

If you have anymore questions feel free to connect with me on linkedin at https://www.linkedin.com/in/omri-luz/