How to Add an XML Sitemap in a Next.js App

We know that Search engines like Google, Bing etc. wants to crawl our website links to be get listed in the search results. A sitemap is not necessary for this task. But having a sitemap.xml file on your website will make this process easier. Here, we will discuss the steps to add a sitemap.xml file in a Next.js app.

What is an XML Sitemap?

An XML sitemap or simply sitemap.xml is a file that lists all the important URLs or pages so that search engines can easily crawl them.

When we go for /sitemap.xml path in popular websites and blogs, we could see an XML file as the result included with all the links in that website.

Below, we can see the XML sitemap of Kuty.me, a URL shorter website.

How to Add an XML Sitemap in a Next.js App

To add an XML sitemap in a Next.js app, we can simply create a sitemap.xml file inside the public directory.

All the URLs inside a sitemap.xml file will be wrapped with withe <urlset> tag.

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<script/>

<url>
<loc>https://kuty.me/</loc>
<lastmod>2021-11-14</lastmod>
<changefreq>daily</changefreq>
<priority>0.9</priority>
</url>

</urlset>

To know more about the tags in an XML sitemap, refer to the XML sitemap protocols page.

So create a sitemap.xml file inside the public directory in our Next.js app, paste the above format and duplicate the <url> tags with all the URLs on our website.

So that the file structure will look the same as below.

Whats next after adding an XML sitemap?

After adding an XML sitemap in our app, we need to deploy it. Now Go to the Google search console, include your domain and add the sitemap URL there.

This will make the crawling process easier. For a great result, we need to add title and meta tags for each page of our Next.js app.

Summary

So in this article, we discussed the steps to add an XML sitemap in a Next.js app. Adding a sitemap and linking it with the Seach engine console will increase the SEO benefits.