next-sitemapでsitemapとrobots.txtを自動生成する

概要#

Next.jsでsitemapを追加する場合、publicフォルダにsitemap.xmlを作成すればよい。
ただ、ページを作成する毎に編集する必要があるため、これを自動化したい。

幸いにもnext-sitemapなるツールがあるため、これを利用する。

環境#

パッケージ	ver
next	12.0.8
next-sitemap	2.0.2
node.js	v16.13.1

ホスティング先：Vercel

インストール#

プロジェクトルートにて、以下コマンドでインストールする。

$ npm install --save-dev next-sitemap

設定#

next-sitemap.jsをプロジェクトルートに生成し、以下を記載する。

priorityやchangefreqは設定していないサイトが多いため、デフォルトから除外するように設定している。
また、generateRobotsTxtをtrueにしておくと、robots.txtを自動生成するので便利。

詳細な設定は公式を参照

next-sitemap.js

module.exports = {
  siteUrl: process.env.SITE_URL,
  generateRobotsTxt: true,
  priority: undefined,
  changefreq: undefined,
  autoLastmod: false,
};

.gitignoreに以下追記する。

.gitignore

/public/robots.txt
/public/sitemap*.xml

また、package.jsonに以下追記する。これを記載することで、npm run buildを実施した際にnpm run postbuildコマンドも自動的に実行される。

package.json

{
  ...
  "scripts": {
    ...
    "postbuild": "next-sitemap"
  }
  ...
}

sitemapのカスタマイズ#

記事については最終更新日時を設定できるため、これをlastmodに記載すればクローラーが記事を更新したと認識できる。

本サイトではSSR(Server Side Rendering)限定であるが、以下でsitemapを動的に生成している。

pages/blog-sitemap.xml.tsx

import { getServerSideSitemap } from "next-sitemap";
import { GetServerSideProps } from "next";
import { getAllPosts } from "src/lib/post";
import { parseISO } from "date-fns";

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const posts = getAllPosts();

  const fields = posts.map((post) => {
    return {
      loc: process.env.SITE_URL + "/blog/" + post.slug,
      lastmod: parseISO(post.updatedAt).toISOString(),
    };
  });
  return getServerSideSitemap(ctx, fields);
};

//Next.jsでエラーを出さないための措置
const Page = () => null;
export default Page;

また、

動的に生成するページの除外
blog-sitemap.xml.tsx自身の除外
自動生成されるrobots.txtにblog-sitemap.xmlをsitemapとして追加

上記3点を実現するため、next-sitemap.jsを以下の通り書き換える。

next-sitemap.js

module.exports = {
  siteUrl: process.env.SITE_URL,
  changefreq: undefined,
  generateRobotsTxt: true,
  priority: undefined,
  autoLastmod: false,
  exclude: ["/blog-sitemap.xml", "/blog/*"],
  robotsTxtOptions: {
    additionalSitemaps: [process.env.SITE_URL + "/blog-sitemap.xml"],
  },
};

備考#

サーバサイドではなくSSGで更新日時を追加できれば良いが、現状のnext-sitemapでは無理そう。