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

My site → [https://chocolat5.com/sitemap.xml](https://chocolat5.com/sitemap.xml)

## Step 1: Install next-sitemap

Use [next-sitemap](https://github.com/iamvishnusankar/next-sitemap) for generating sitemap.xml.  
sitemap.xml and robot.txt for all static/pre-rendered/dynamic/server-side pages will be generated.

```bash
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.

```javascript
/** @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.

```json
{
...

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

![](./nextjs-sitemap-google-console01.png)

## Step 4: Add Google Search Console

Access and log in to [Google Search Console](https://search.google.com/search-console/about) . Go to Indexing > Sitemaps.

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

![](./nextjs-sitemap-google-console02.png)

## References

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


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

Tags