tips / nextjs
How to Create sitemap.xml with Next.js + Vercel
January 02, 2023
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参照)