How to have a sitemap for your Next.js website - Ujjwal Bhandari

We know the importance of metadata, favicons and canonical links specially for SEO which all reside in the head element. Today's topic does not reside inside the head element but is just as crucial for any website or blog: a sitemap.

One of the easiest ways to build a sitemap is using a next-sitemap library. Let's see how easy it is to make a sitemap for any Next.js website.

Step 1: Install next-sitemap package:

You can install next-sitemap like this:

npm i next-sitemap

step 2: Configure next-sitemap

After installing next-sitemap, you need to create a next-sitemap.config.js file in the root directory of your project. This is the same place your package.json file is.

Here's what my next-sitemap.config.js file looks like:

/** @type {import('next-sitemap').IConfig} */

module.exports = {

siteUrl: 'https://www.ujjwall.com.np/',

exclude: ['/icon.svg', '/apple-icon.png', '/manifest.webmanifest', '/tags/*'],

generateRobotsTxt: true,

generateIndexSitemap: false,

robotsTxtOptions: {

policies: [

{

userAgent: '*',

allow: '/',

}

]

}

}

You can review what each setting above does on the next-sitemap npm page, but I think you can quickly see I'm excluding some files and the /tags/* path from the generated sitemap. I'm also telling it to generate a robots.txt file.

One key benefit of generating a Next.js sitemap with the next-sitemap package is that it supports a sitemap index. This can be beneficial for large websites and blogs. We're talking sites with thousands of pages.

Step 3: Add to your post build (important) Your Next.js site needs to generate all static pages first, so creating the sitemap is not part of your build process. Instead, it gets generated in a postbuild process. We trigger that by adding the postbuild script to package.json:

"scripts": {

"dev": "next dev",

"build": "next build",

"start": "next start",

"lint": "next lint",

"postbuild": "next-sitemap"

},

And now you can type npm run build in your terminal to build your site and generate a sitemap.xml file and a robots.txt file that you will find in your /public directory.

My sitemap.xml generated by next-sitemap:

<?xml version="1.0" encoding="UTF-8"?>

<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">

<url><loc>https://www.ujjwall.com.np</loc><lastmod>2023-11-14T19:24:05.794Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>

<url><loc>https://www.ujjwall.com.np/posts/does-my-nextjs-blog-need-canonical-links</loc><lastmod>2023-11-14T19:24:05.794Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>

<url><loc>https://www.ujjwall.com.np/posts/nextjs-favicon-svg-icon-apple-chrome</loc><lastmod>2023-11-14T19:24:05.794Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>

<url><loc>https://www.ujjwall.com.np/posts/nextjs-ordering-merging-metadata</loc><lastmod>2023-11-14T19:24:05.794Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>

<url><loc>https://www.ujjwall.com.np/posts/ssg-ssr</loc><lastmod>2023-11-14T19:24:05.794Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>

</urlset>

My robots.txt file generated by next-sitemap:

# *

User-agent: *

Allow: /

# Host

Host: https://www.ujjwall.com.np/

# Sitemaps

Sitemap: https://www.ujjwall.com.np/sitemap.xml

That’s all now your website can be crawled by the google bot!

To know more about Ujjwal Bhandari