はじめに

next-sitemapというライブラリを使うと、Next.jsで構築されているWebサイトのサイトマップを簡単に作成することができます。この記事では、next-sitemapを使ってサイトマップを生成し、Google Search Consoleに登録する手順を紹介します。

next-sitemapのインストール

以下のコマンドでnext-sitemapライブラリをインストールします。

$ npm i --save next-sitemap

Configファイルの作成

プロジェクトのルートにnext-sitemap.config.jsを作成します。

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: 'https://io.traffine.com/',
  generateRobotsTxt: true,
  sitemapSize: 7000,
};

• siteUrl: サイトのベースURL
• sitemapSize: 7000: サイトマップ内のURLが7,000を超える場合に、インデックス（sitemap.xml）とサイトマップファイル（sitemap-0.xmlなど）が生成される

package.jsonの編集

package.jsonを編集します。ビルド後のスクリプトとしてpostbuildを追加します。

{
...

   "build": "next build",
+  "postbuild": "next-sitemap --config next-sitemap.config.js"

...
}

npm run buildを実行するたびにsitemap.xmlやrobot.txtなどのファイルがpublicフォルダに生成されます。

Google Search Console に登録

Google Search Consoleにログインし、サイトマップに移動します。

サイトマップのURLを登録します。このとき登録するのは/sitemap.xmlのみで大丈夫です。無事に登録されるとステータスがSuccessになります。

参考

https://github.com/iamvishnusankar/next-sitemap