How to Create sitemap.xml with Next.js + Vercel

Introducing how to create sitemap.xml for Next.js blog site deploy on Vercel.

My site → https://chocolat5.com/sitemap.xml

Step 1: Install next-sitemap

Use next-sitemap for generating sitemap.xml.
sitemap.xml and robot.txt for all static/pre-rendered/dynamic/server-side pages will be generated.

npm i --save next-sitemap

Step 2: Create config file

Create next-sitemap.config.js file under your project root.
This is the minimal configuration to split a large sitemap.

siteUrl is base URL of website.

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: 'https://chocolat5.com/',
  generateRobotsTxt: true,
  sitemapSize: 7000,
};

sitemapSize: 7000 : When the number of URLs in a sitemap is more than 7000, next-sitemap will create sitemap (e.g. sitemap-0.xml, sitemap-1.xml) and index (e.g. sitemap.xml) files.

Step 3: Add script to package.json

Add next-sitemap script for creating sitemap files as postbuild .
You can also add custom config file to the end of script.

{
...

  "build": "next build",
  "postbuild": "next-sitemap --config next-sitemap.config.js"

...
}

Each time run the command npm run build , sitemap.xml will be generated and show the message. sitemap.xml and robot.txt files will be generated on public.

Step 4: Add Google Search Console

Access and log in to Google Search Console . Go to Indexing > Sitemaps.

Enter the URL for your sitemap to “Add a new sitemap” and submit.
If it registered, you will get Success .

References

• GitHub - iamvishnusankar/next-sitemap https://github.com/iamvishnusankar/next-sitemap（2023-1-2参照）
• VerselにデプロイしたNext.js製のサイトのサイトマップをデプロイの度に自動生成する https://blog.kimizuka.org/entry/2022/06/06/141320 （2023-1-2参照）