Next.jsでdynamic routingに対応したsitemap.xmlを自動生成する

Next.jsで作成したwebサイトを公開するにあたり、 sitemap.xml を作成することになりました。

sitemap.xml を自動で生成するサービスは探せば見つかりますが、試してみたところ、どれもトップページしか含まれていませんでした。

dynamic routingで生成される全てのページを含む sitemap.xml を作ろうと調べてみたところ、以下のライブラリに行き着きました。

https://github.com/IlusionDev/nextjs-sitemap-generator

以下、 sitemap.xml 作成の手順です。

1. next build を実行して静的ファイルを生成しておく
2. 任意のディレクトリに任意の名前のjavascriptファイルを作成
3. README 内のスクリプトをコピー
4. ↑を貼り付けたjsファイルが存在するディレクトリで node ${作成したjs} を実行

コードのサンプルは以下

const sitemap = require("nextjs-sitemap-generator");
const fs = require("fs");

const BUILD_ID = fs.readFileSync(".next/BUILD_ID").toString();

sitemap({
  baseUrl: "https://example.com",
  pagesDirectory: __dirname + "/.next/serverless/pages",
  targetDirectory: "public/",
  ignoredExtensions: ["js", "map"],
  ignoredPaths: ["[fallback]"],
});

baseUrl は自分のサイトのURL

pagesDirectory ディレクトリは生成された静的ページのディレクトリ

targetDirectory は sitemap.xml を出力するディレクトリ。 public/ にしておけばそのまま公開される。

ignoredExtensions/ignoredPaths は対象外のファイル・ディレクトリ

4.↑を貼り付けたjsファイルが存在するディレクトリで node ${作成したjs} を実行

これで targetDirectory 内に sitemap.xml が出力されます。
node 〜 は packages.json にscriptとして登録しておくと便利です。