
Vercel にデプロイしている Next.js 製のサイトやブログにサイトマップ（ sitemap.xml ）を追加する方法です。

[https://chocolat5.com/](https://chocolat5.com/tips/) [のサイトマップ](https://chocolat5.com/sitemap.xml)

## 実現したいこと

- Next.js 製のサイトで sitemap.xml を生成する

## next-sitemap のインストール

sitemap.xml の生成に [next-sitemap](https://github.com/iamvishnusankar/next-sitemap) を使用します。
サイトマップと robot.txt が生成され、Next.js の static/pre-rendered/dynamic/server-side 全てのレンダリング方法に対応しています。

```bash
npm i --save next-sitemap
```

## config ファイルの作成

プロジェクトの root に `next-sitemap.config.js` を作成します。

以下は大規模なサイトマップを分割するための最小限の構成になります。

`siteUrl` はサイトのベースURLです。

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

`sitemapSize: 7000` は、サイトマップ内のURLが7,000を超える場合に、インデックス（sitemap.xml）とサイトマップファイル（sitemap-0.xml など）が生成されます。

## package.json の編集

build 後のスクリプトとして `next-sitemap` を追加します。
カスタム config ファイルを使用する場合は `postbuild` の最後のファイル名を変更します。

```json
{
...

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

...
}
```

`npm run build` を実行するたびにサイトマップが生成され、以下のメッセージが表示されます。
sitemap.xml や robot.txt などのファイルは public フォルダに生成されます。

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

## Google Search Console に登録

[Google Search Console](https://search.google.com/search-console/about) にアクセス・ログインし、インデックス作成 > サイトマップ に移動します。

「新しいサイトマップの追加」からサイトマップのURLを登録します。  
このとき登録するのは /sitemap.xml のみでOKです。

無事に登録されるとステータスが `Success` になります。

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

## 参照

- 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参照）


Next.js + Vercel でサイトマップsitemap.xml を生成する

Tags