How to create a sitemap with next-sitemap (2023)

Introduction

Sitemaps are XML files that provide information to search engine crawlers about the structure of a website and the URLs that are available for crawling and indexing.

For example i have e-commerce website - roomy.rs, i don't have a lot of products there so i don't need to dynamicaly make sitemap on every "npm run build" i could just manualy add sitemap.xml file inside public folder like this, you should just change with your url's that want to be indexed, and if you want change frequency and priority. In most cases you don't want to manualy implement sitemaps so in this blog we will cover how to do it with next-sitemap using Next.js.

<?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.roomy.rs</loc><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.roomy.rs/cesta-pitanja</loc><changefreq>daily</changefreq><priority>0.3</priority></url>
<url><loc>https://www.roomy.rs/kontakt</loc><changefreq>daily</changefreq><priority>0.2</priority></url>
<url><loc>https://www.roomy.rs/majice</loc><changefreq>daily</changefreq><priority>0.3</priority></url>
<url><loc>https://www.roomy.rs/prijava</loc><changefreq>daily</changefreq><priority>0.2</priority></url>
<url><loc>https://www.roomy.rs/registracija</loc><changefreq>daily</changefreq><priority>0.2</priority></url>
<url><loc>https://www.roomy.rs/majica/Naruto-i-Kurama-oversize-majica?style=0</loc><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://www.roomy.rs/majica/Captain-Levi-oversize-majica?style=0</loc><changefreq>daily</changefreq><priority>0.7</priority></url>
</urlset>

Changefreq

The changefreq attribute is one of the optional elements you can include for each URL listed in the sitemap. It is used to provide a hint to search engines about how frequently a particular page is updated. The possible values for the changefreq attribute typically include:

Value	Description
Always	Page is updated every time it is accessed.
Hourly	Page is updated approximately once every hour.
Daily	Page is updated once every day.
Weekly	Page is updated once a week.
Monthly	Page is updated once a month.
Yearly	Page is updated approximately once a year.
Never	Page is not expected to change at all.

Keep in mind that these values are just hints to search engines and may not have a significant impact on the actual crawling frequency. Search engines use various algorithms and signals to determine how often to crawl and update their index for a particular web page such as the site's authority, the popularity of the page, and historical update patterns. The changefreq attribute is just one of the ways you can provide additional information to search engines to better understand your website's content and update frequency.

Priority

In the context of a sitemap, priority refers to a numeric value that indicates the relative importance of a specific URL compared to other URLs on the same website. The priority value is used to provide search engines with information about which pages are considered more significant or higher priority for indexing and ranking purposes.

The "priority" attribute is one of the optional elements that can be included for each URL listed in a sitemap. The value of the "priority" attribute ranges from 0.0 to 1.0, where 0.0 represents the lowest priority and 1.0 represents the highest priority. The value can be specified up to one decimal place.

priority does not affect how search engines prioritize your pages compared to other websites on the internet. Search engines may use this value as a hint, but they rely on a variety of other factors, such as the quality of the content, inbound links, and user engagement metrics, to determine the actual importance and ranking of a page in search results.

Loc

In the context of a sitemap, loc stands for "location" and refers to the URL (Uniform Resource Locator) of a specific web page. The loc element is a required field in a sitemap and is used to provide the URL of each page on your website that you want to include in the sitemap. By including the loc element in the sitemap, you are telling search engine crawlers the specific locations of your web pages, making it easier for them to discover and index your content.

How to use next-sitemap to make sitemaps in Next.js

Inside package.json, add a new script called postbuild as follows: "postbuild": "next-sitemap" , This means that every time npm run build or yarn build is called, the next-sitemap command will be executed automatically after the build process is completed.

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    //
    "postbuild": "next-sitemap"
    //
  },

Make a sitemap file in the root of the project named next-sitemap.config.js and change the data for 'Roomy' with your own website URL and data (you should change URL, /admin (with destinations that you don't want from Google to track), SITE_URL inside .env file).

 /** @type {import('next-sitemap').IConfig} */
 module.exports = {
   siteUrl: process.env.SITE_URL || "https://www.roomy.rs",
   generateRobotsTxt: true, // (optional)
   robotsTxtOptions: {
     policies: [
       // advice google to not index /admin/anything
       { userAgent: "*", disallow: "/admin" },
       // everything else is okay
       { userAgent: "*", allow: "/" },
     ],
     // this is for dynamic sitemap url's (in my case products)
     // that we will implement later
     additionalSitemaps: [`${process.env.SITE_URL}/server-sitemap.xml`],
   },
   // what you exclude that will not show up inside sitemap.xml
   exclude: ["/admin/*"],
   // ...other options
 };

Now, try running the command npm run next-sitemap or yarn next-sitemap (you don't need to run npm run build or yarn build every time and wait for it). After running the command, you should have sitemap.xml and robots.txt files in the public folder. You can access them through your URL: https://www.yourwebsite.com/sitemap.xml or https://www.yourwebsite.com/robots.txt to view them.
Remember to add your sitemap.xml and robots.txt files to the .gitignore file. These files will be automatically generated after the build on Vercel or any other platform.
```
 /public/robots.txt
 /public/sitemap.xml
 /public/sitemap-0.xml
```
Now, we will implement a dynamic sitemap. Inside the pages folder, create a new folder named server-sitemap.xml.
Inside that folder, create an index.js file. Based on your data, change the content to fit your website's needs. If you encounter an annoying error like: "fields.map is not a function" while following other articles or videos, the solution is to avoid using getServerSideSitemap and, instead, use getServerSideSitemapLegacy like this:

import { getServerSideSitemapLegacy } from "next-sitemap";
import db from "../../utils/db";
import Product from "@/models/Product";

export const getServerSideProps = async (ctx) => {
  //connect to the mongoDB
  await db.connectDb();
  const products = await Product.find().lean();

  // console.log(products);

  const fields = products.map((product) => ({
    loc: `${process.env.SITE_URL}/majica/${product.slug}`,
    lastmod: product.updatedAt,
  }));
  // console.log(fields)
  return getServerSideSitemapLegacy(ctx, fields);
};

export default function Site() {}

That's it! You now have your sitemap.xml for all the pages you want. The next question is, how do you use that sitemap and submit it to Google (Google Search Console)?

How do I add the sitemap to Google Search Console?

Just go to your Google Search Console -> 'Sitemaps'

inside the URL input, put https://www.yourwebsiteurl.com/sitemap.xml. Immediately after that, Google should indicate that it was successful and display the number of pages it discovered. After some time, the pages will be indexed, usually, it takes around one day.

Documentation

best YouTube video on the topic - https://youtu.be/fOoH9Z5adrg

next-sitemap documentation - https://www.npmjs.com/package/next-sitemap

How to create a sitemap with next-sitemap that updates with every "build" command or deployment to Vercel in Next.js.

Effortlessly Manage Your Website's SEO with an Automatically Updating Sitemap on every "npm run build" in Next.js with next-sitemap.

Table of contents