sitemap.xml を Next.js でビルド時に自動生成する

このブログのサイトマップをビルド時に自動生成するように設定したので、その内容を軽く紹介。
実際の変更は PR をご覧ください。

前提

• Next.js + SSG
• この設定はビルド時のサイトマップ生成であるため、あらかじめ注意

使ったもの

• next-sitemap

やったこと

1. next-sitemap のインストール

$ yarn add next-sitemap

2. 設定ファイルの作成

リポジトリルートに作成する

// next-sitemap.js
module.exports = {
  siteUrl: process.env.HOST || 'https://example.com',
  generateRobotsTxt: true, // ← robots.txt が不要なら false でおk
  outDir: './out'
}

3. ビルドスクリプトに実行設定

// package.json
{
  "scripts": {
    // '&& next-sitemap' をビルドスクリプトに追記しただけ
    "build": "next build && next export && next-sitemap"
  }
}

たったこれだけでサイトマップがビルド時に生成された🙌

実際に出来上がったもの

<!-- out/sitemap.xml -->
<?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.ykicchan.dev</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-04-06T06:04:19.307Z</lastmod></url>
<url><loc>https://www.ykicchan.dev/about</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-04-06T06:04:19.307Z</lastmod></url>
<url><loc>https://www.ykicchan.dev/posts/2021-03-26</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-04-06T06:04:19.307Z</lastmod></url>
<url><loc>https://www.ykicchan.dev/posts/2021-03-12</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-04-06T06:04:19.307Z</lastmod></url>
<url><loc>https://www.ykicchan.dev/posts/2020-07-20</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-04-06T06:04:19.307Z</lastmod></url>
<url><loc>https://www.ykicchan.dev/posts/2020-07-13</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-04-06T06:04:19.307Z</lastmod></url>
<url><loc>https://www.ykicchan.dev/posts/2020-07-12</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-04-06T06:04:19.307Z</lastmod></url>
<url><loc>https://www.ykicchan.dev/posts/2020-07-04</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-04-06T06:04:19.307Z</lastmod></url>
</urlset>

# out/robots.txt
# *
User-agent: *
Allow: /

# Host
Host: https://www.ykicchan.dev

# Sitemaps
Sitemap: https://www.ykicchan.dev/sitemap.xml

もちろんこれは最低限の設定で、詳しく設定したい場合は next-sitemap.js で変更可能。
詳しくは next-sitemap/configuration-options を参照。

なお、今回は SSG での利用だったが、next-sitemap 動的生成にも対応している。
動的生成する場合は zenn.dev の生みの親である @catnose99 さんの記事、 Next.jsで動的にXMLサイトマップを生成する が参考になった。

なぜ next-sitemap を採用したか？

nextjs-sitemap-generator の利用も初めは検討したが

If you want use this package you must create the sever file. You can find how to do it here NextJs custom server

と README にあるように、 Custom Server の利用が必要な模様。
Custom Server は使っておらず、回避できるならしたかったため、別のライブラリ(next-sitemap)を利用することにした。

自前で動的生成することも少し考えたが、現状ビルド時にしかコンテンツも増えない設計だったため、わざわざ動的生成するメリットも特になかった。
ほとんど設定が不要で導入が楽なものを探し、結果 next-sitemap を採用した。