Next.js

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

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

技術選定

next-sitemapnextjs-sitemap-generator のどっちか

npmのインストール数が圧倒的に next-sitemap が多い
かつ、公式の examples にあるのが with-next-seo のリポジトリ

→ next-seo を採用

導入手順

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

yarn add -D next-sitemap

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

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

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

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

.eslintigrnore に追加する

特定のURLを除外する方法

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

module.exports = {
  siteUrl: 'https://hoge.net',
  exclude: ['/guides/terms', '/guides/privacy'],
  generateRobotsTxt: true,
};
ABOUT ME
うたたぞう
いつか海辺でゆったりライフを送りたい20代エンジニアです。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です