sitemap.xmlとは

XMLサイトマップというのはXML形式のファイルのこといいます。そのXMLサイトマップを設置することで、新規記事の公開やリライトによる更新情報をインデックスに素早く反映させ、検索結果に表示させることができます。設置したからといって上位表示に直結するわけではありませんが、クローリングが効率的になるということは、結果的にSEO上好ましい状態に近づくということになるでしょう。

Next.jsでの作成

Next.jsでStatic GenerationをしていわゆるJamstackのサイトを作る際にデプロイ時に一緒にXMLサイトマップ（sitemap.xml）も作る手順をご紹介します。

next-sitemapを使う

こちらのパッケージを使えば簡単にできてしまいます。
設定ファイルを一つと、pacakge.jsonにscriptsを足せばビルド時にサイトマップが生成され流という便利なパッケージです。Next.jsでサイト構築するのならおすすめのパッケージです！！
https://github.com/iamvishnusankar/next-sitemap#readme

まずはインストール

npm install --save-dev next-sitemap

設定ファイルの作成

sitemap.config.jsファイルをプロジェクトの直下に作ります。

module.exports = {
  siteUrl: 'ここにサイトのURL',
  generateRobotsTxt: true,
  outDir: './out',
};

オプションを一つ一つ解説をすると・・・
siteUrl：サイトURLを指定します。これは必須項目です。
generateRobotsTxt：robots.txt ファイルを生成し、生成されたサイトマップをリストアップします。デフォルトfalseです。
outDir：生成するディレクトリを指定します。

デプロイ時にサイトマップの生成されるようにする

packge.jsonのscriptsに追記をします。おそらく next export しているところがあると思うのでその後に next-sitemap --config sitemap.config.js を追記します。

"export": "npm run build && next export && next-sitemap --config sitemap.config.js",

下記のようにコマンドを叩いていただくとサイトマップの一緒に生成されます。

npm run export

ちなみに、弊社サイトだとこのような形で out ディレクトリ内に生成されます。

最後に Google Search Console へサイトマップを登録

https://search.google.com/search-console
Google Search Consoleへサイトマップを登録します。Google Search Consoleのページに行ったら左メニューのサイトマップをクリックします。次にURLの入力欄があるのでそこにサイトマップのURLを入力してください。
サイトのURL/sitemap.xml になるはずです。弊社の場合は https://brachio.co.jp/sitemap.xml です。