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

基本的にはちょちょいのほいです。

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


❶ Next.jsにnext-sitemapを導入し、サイトマップを生成する準備をする

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

www.npmjs.com
www.npmjs.com

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

next-sitemapの導入

yarn add -D next-sitemap

で導入します。

next-sitemap.config.jsの作成

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

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

package.jsonの編集

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

postbuildを作成します。


❷ デプロイの度にサイトマップを自動生成するようにVercelのビルド設定を編集する

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にサイトマップを登録する


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