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が生成されているはずです。