Next.jsで動的にXMLサイトマップを生成する

BRANK

2021年1月現在、Next.jsでXMLサイトマップを生成するライブラリとしてはnextjs-sitemap-generatorが最も人気のようです。nextjs-sitemap-generatorのドキュメントを軽く読む限り、Next.jsのCustom Serverを使用してビルド時にサイトマップを生成する仕組みのようなので、以下のようなケースでの使用には最適とは言えません。Custom Serverは触りたくないコンテンツ追加のタイミングでビルドが走らないユーザー投稿型のサイトでも、サイトマップを一定間隔で更新したい個人的に色々と試してみたところ、思った以上に簡単にXMLサイトマップを動的に作ることができたので、その方法を共有します。以下のような方針で実装します。sitemap.xmlをNext.jsの1つのpageとして生成します。API Routesを使っても良いのですが、役割的にpages直下にあった方が分かりやすいと思うので。ビルド時点では生成されておらず、ページへのアクセスがあったときに生成されます。キャッシュするのでAPIサーバーへの負荷は抑えられます。1. pages/sitemap.xml.tsxを作成するまずpagesディレクトリ内にsitemap.xml.tsxという名前のファイルを作成します。/sitemap.xmlにアクセスしたときには、このフ…