Dynamic Sitemap Generation in Next.js 🗺
By: Marte Løge
Tags: SEO, Nextjs, Programming, Front End Development, React

Dynamic Sitemap Generation in Next.js 🗺

Create your own dynamic sitemap with next.js!

To get your page indexed and all sites discovered by Google you should maybe provide a compass to help — also known as a Sitemap. A sitemap is a list of all routes on your page that you want Google to index. Let’s make a dynamic sitemap for your Next.js app without any plugins or libraries!

Photo by Aron Visuals on Unsplash

🗺 What is a Sitemap?

A sitemap is a set of URLs written as an XML file ( sitemap.xml ). The image below is a screenshot of a sitemap from one of my pages written with Next.js called InkTemplate:

Example of Sitemap.xml from InkTemplate

The most basic sitemaps are only a set of links ( <url> ) but you can add more information than the location ( <loc> ) like the priority ( <pri> ), frequency of change( <changefreq> ), and last modification date( <lastmod> ). If you want to read more about the sitemap XML standard you can read more in the documentation. You can point to the sitemap in your robots.txt so crawlers and search engines can find it — usually, you can find both sitemap.xml and robots.txt at the root ( yoursite.com/sitemap.xml ).

Example of robots.txt from InkTemplate

🗺 Create your own sitemap with next.js

By nature, Next.js has a file routing system. If you want to have your sitemap placed at root ( yoursite.com/sitemap.xml ) you can simply make a file in the routes folder named sitemap.xml.jsx . Let's make a simple sitemap listing all the routes for your page:

Sitemap with routes — Image by Author

If you have multiple environments, the getInitialProps will give you the headers so you can fetch the host or other relevant information you might need.

💃 Dynamic routes

Most pages are likely to have a dynamic route — like different products. Let's say you have a route named product/[id].jsx giving each product it’s district route. For a product with id 123, the URL would be yoursite.com/product/123 . You would want each of the products to get their own URL in the sitemap so you need to provide a list of all products by hardcoding a list or fetch a list from an API in getInitialProps .

Sitemap with dynamic routes — Image by Author

💬 (i18n) Language routes

To extend your audience it would be smart to provide your content in multiple languages. For Google being able to index all pages in different languages you should have the language code in the slug somewhere like yoursite.com/<LANGUAGE>/product/123 . For all products and for all languages there would then be a distinct URL. If you have your page in English (default) and Norwegian (NO) you would have two separate links to the product 123 like this: yoursite.com/product/123 and yoursite.com/no/product/123 .

Sitemap with language codes — Image by Author

⏩ Fast forward

Ok, now what? You have a sitemap listing all distinct routes for your page. To fast forward the process you can tell Google at Google Search Console “hi, I have a map for you to explore”. At Google Search Console you can upload your sitemap and Google will look at the map right away to start indexing your pages. I also recommend using Google Search Console to track keywords — it will give you the idea of what people searched for before clicking at your page and can give you tracking of your search rating.