★

Next.jsでサイトマップを自動生成するライブラリnext-sitemapを試してみた！

thumbnail

はじめに

Next.js でサイトマップを自動作成するための手順を解説します。

ライブラリのインストール

next-sitemap というライブラリをインストールする

# npm の場合
npm install --save-dev next-sitemap

next-sitemap.config.js の作成

next-sitemap.config.js を作成して、下記のコードを記述する

/** @type {import('next-sitemap').IConfig} */

module.exports = {
    siteUrl: process.env.SITE_URL || 'https://example.com',
    generateIndexSitemap: false,
    generateRobotsTxt: true,
    sitemapSize: 7000,
  }
  • siteUrl: .envに記述したWebサイトURLを読み込む
  • generateIndexSitemap: インデックスサイトマップの自動生成（個人サイト用なので無効にします）
  • generateRobotsTxt: robots.txs の自動生成
  • sitemapSize: 指定した数値（7000）を超えると、インデックス（sitemap.xml）とサイトマップファイル（sitemap-0.xml など）が生成されます。

.env ファイルの更新

.env ファイルに下記の内容を追記する

SITE_URL='登録したいサイトURL'

package.json ファイルの更新

package.json に下記の内容を追記する

  "scripts": {
    "postbuild": "next-sitemap --config next-sitemap.config.js",
  },

スクリプトの実行

スクリプトコマンドを実行する

npm run build

public 配下に sitemap.xml や robots.txt が自動生成されます。

おわりに

非常に簡単にサイトマップを作成することができる便利なライブラリの使い方について解説しました。next-sitemap.config.jsで細かな設定が出来るようなので、見てみようと思います。

参考