VerselにデプロイしたNext.js製のサイトのサイトマップをデプロイの度に自動生成する 🗺

Next.js用のサイトマップ生成ツールを探してみると、next-sitemap、nextjs-sitemap-generatorが有名なようです。

今回は、現時点でスター数が多いnext-sitemapを使ってみます。

yarn add -D next-sitemap

で導入します。

module.exports = {
  siteUrl: process.env.URL,
  generateRobotsTxt: true
};

URLは.envに記載する想定です。

{
  "scripts": {
    "build": "next build",
    "postbuild": "next-sitemap"
  }
}

postbuildを作成します。

Setting > General > Build & Development Settings > BUILD COMMAND を、

`npm run build` or `next build`

から、

yarn build && yarn postbuild

へ変更します。

また、Setting > Environment Variables からURLを登録します。
これで、yarn build && yarn postbuildが走る度にサイトマップが更新されます。

Google Search Consoleのインデックス > サイトマップ > 新しいサイトマップの追加にサイトマップのURLを送信します。
初回はsitemap.xmlとsitemap-0.xmlが生成されたのですが、sitemap.xmlを登録すればOKです。

みかづきブログ・カスタム