Next.jsで静的サイトのサイトマップを作成する

Next.js で作成した静的サイトのサイトマップを手軽に作成する為に next-sitemap を利用して作成します。

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

next-sitemap のインストール

npm install next-sitemap

sitemap.config.js の作成

次にサイトマップの作成設定ファイルを作成します。

プロジェクトルートに sitemap.config.js という名前でファイルを作成します。

デフォルトは public ディレクトリに sitemap.xml が展開されるので今回は./out/ディレクトリに変更しています。

sitemap.config.js

module.exports = {
  siteUrl: process.env.SITE_URL || "[サイトのURL]",
  generateRobotsTxt: true,
  sitemapSize: 7000,
  outDir: "./out",
};

package.json にスクリプト登録

今回はビルドと一緒にサイトマップを展開したいので、package.json を下記のように変更します。

package.json

"scripts": {
    "dev": "next dev",
    "build": "next build && next-sitemap --config sitemap.config.js",
    "start": "next start",
    "lint": "next lint"
},

これでビルドコマンドと同時に sitemap.xml が展開されるようになります。