Next.jsでサイトマップを爆速で生成してくれるパッケージ

自分が携わってきたプロジェクトで何度かサイトマップの生成の実装をおこなってきました。
コードを書くものもあれば、パッケージを使用してサクっと作ってしまうケースもありました。

その中でも個人的にすごく設定が簡単で爆速でサイトマップを生成してくれるパッケージを紹介します。

それがこちら
next-sitemap

「Next.js sitemap generator」などで検索するとこちらのnextjs-sitemap-generatorが一番にでてきます

ですが個人的にはnext-sitemapを推したいです。ちなみにGithubのスター数もnextjs-sitemap-generatorといい勝負です。(2021/2/25時点)

nextjs-sitemap-generatorのほうはカスタムサーバーなどサーバーを通してビルドを実行する必要がありますがnext-sitemapのほうはというと簡単な設定ですぐに終わります。
Next.jsがSSGやCSRを推奨するようになったこともあって、今後はこちらが伸びていきそうです。

さて実際の設定はというとこんな感じです。
ルート配下にnext-sitemap.jsを配置します

next-sitemap.js

module.exports = {
    siteUrl: 'http://example.com',
    generateRobotsTxt: true,
    sitemapSize: 7000,
    outDir: './out'
}

outDirにはsitemap.xmlとrobots.txtが出力される場所を指定します。
Next.jsのSSGではデフォルトでoutディレクトリになるためoutを指定しておきます。

next-sitemapコマンドを追加しておきます

"scripts": {
    "start:dev": "nodemon",
    "build:next": "next build && next export && tsc --project tsconfig.server.json",
    "build": "run-s build:next",
    "postbuild": "next-sitemap" #この1行
},

これで完了です。
あとは先ほど追加したnpm run postbuildコマンドを実行します。
outディレクトリにsitemap.xmlとrobots.txtが出力がされていれば成功です。
詳しいオプションはGithubに記載されているのでそちらを参照してください。

関連記事