目次
Next.jsで作ったこのブログにsitemap.xmlを追加したので、その方法を紹介します。
next-sitemapをインストールする
今回は簡単にsitemap.xmlを生成できそうなパッケージのnext-sitemapを利用することにしました。
他にはnextjs-sitemap-generatorが人気のパッケージでどちらかを使うことが多いようです。next-sitemapの方が設定するものが少なく簡単に作成できそうだったのでnext-sitemapを採用します。
yarn add next-sitemap -D
上記のコマンドでNext.jsのプロジェクトにインストールします。
設定ファイルを作成する
Next.jsのプロジェクトのルート直下にnext-sitemap.jsを作成して設定内容を記述します。
module.exports = {
siteUrl: process.env.SITE_URL || 'https://crop-cream.com',
generateRobotsTxt: true,
}
今回は必要最低限の設定で十分なので上記だけですが、必要に応じてオプションで色々と設定することができます。
サイトマップをビルドするコマンドを設定する
package.jsonの中でコマンドの設定をします。
{
"build": "next build",
"postbuild": "next-sitemap"
}
公式ではpostbuildを作るようになっていたのでそのまま作ってみましたが、buildの中にnext-sitemapを入れても大丈夫です。
Vercelでビルドの設定を変更する
前のコマンドの設定で既存のbuildコマンドの中にnext-sitemapを入れた場合は特に設定不要です。
Vercelのsettings>Generalに行き、BUILD COMMANDの項目を修正します。

ビルドしてsitemap.xmlを確認してみる
ここまでの設定を反映してビルドしてsitemap.xmlが生成されているか確認してみましょう。
成功していれば画像のようにルートにsitemap.xmlが生成されているはずです。
