Next.js

Next.js で動的にXMLサイトマップ（sitemap.xml）を生成する方法まとめ

Next.js で動的にXMLサイトマップ（sitemap.xml）を生成する方法メモ。

技術選定

next-sitemap と nextjs-sitemap-generator のどっちか

npmのインストール数が圧倒的に next-sitemap が多い

→ next-sitemap を採用

導入手順

https://github.com/iamvishnusankar/next-sitemap
を参考にいれていく

yarn add -D next-sitemap

next-sitemap requires a basic config file (next-sitemap.js) under your project root

✅ next-sitemap will load environment variables from .env files by default.

とのこと。

next-sitemap.config.js を生成して下記内容を追加

module.exports = {
  siteUrl: process.env.SITE_URL || 'https://hogehoge.net',
  generateRobotsTxt: true,
};

npm scripts に下記を追加
→ build が終わると自動的にサイトマップを生成してくれるようになる

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "postbuild": "next-sitemap",
    "start": "next start",

.eslintigrnore に next-sitemap.js を追加する

.gitignore に追加する

# for next-sitemap
/public/robots.txt
/public/sitemap*.xml

特定のURLを除外する方法

next-sitemap.js にて exclude を指定する
トレイリングスラッシュをつけると動かないことに注意が必要

module.exports = {
  siteUrl: 'https://hoge.net',
  exclude: ['/guides/terms', '/guides/privacy'],
  generateRobotsTxt: true,
};

-Next.js