HarioNote

Newt + Next.js + Netlifyの静的サイトにnext-sitemapを使ってビルド時にサイトマップを自動生成する

Newt + Next.js + Netlifyの静的サイトにnext-sitemapを使ってビルド時にサイトマップを自動生成する

前置き

※本記事ではNewtで作成したサイトをNetlifyにホスティングする手順や記事更新時の自動デプロイの方法については言及しません。
公式のチュートリアルにわかりやすい手順の記載があります。

背景

そういえばGoogleのサーチコンソールにサイトマップがないよと言われていて対応するのを忘れており、自動生成できるようにして対応しなきゃと思いやったときの備忘録です。

当ブログはタイトルにもある通り、Newt(ヘッドレスCMS) + Next.js + Netlify(静的ホスティングサービス)で構成されています。
記事を投稿するとWebhookによりNetlifyで自動的にビルドコマンドが走り、静的ビルドが行われ記事ページが生成されてサイトが最近状態に更新されます。

そのため以下で説明する方法は、静的ファイル生成で静的ホスティングサービスにホストしている場合に有効な方法となります。（nodeのサーバー上で動かしている人にとっては参考にならないかもですのでご注意ください。）

やったこと

Next.jsを使っているのであまり色々考えなくても使えそうなnext-sitemapを使うことにしました。

1. next-sitemapをインストール

バージョンは最新でいいと思います。

npm install next-sitemap@4.2.3 --save-exact

2. 公式のGetting startedに従い設定ファイルを作成

Create config fileに従い設定ファイルをサイトのリポジトリのルートに作成します。

// next-sitemap.config.json
module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  generateRobotsTxt: true, // (optional)
  // ...other options
}

私は環境変数は特に設定していないですが.env...に関する記述はそのまま残してます。（特に意味はないです）

2. npmスクリプトの編集

next-sitemapの機能(サイトマップ生成)が利用できるようにpackage.jsonにスクリプトの定義を追加します。
さらにビルド時のビルドコマンド実行時にもサイトマップ生成が行われるように元々あったbuildコマンドの定義も編集します。

before

  "scripts": {
    "build": "next build",
    ...
  },

after

  "scripts": {
    "build": "next build && next-sitemap", //ビルド時に実行する用
    ...
    "postbuild": "next-sitemap" //ローカルで動作確認する用
  },

やったことは以上になります。

ローカルで動作確認するときはターミナルで

npm run postbuild

を実行すると/public下にsitemap.xmlとsitemap-0.xmlが生成されます。（記事数によってこの辺は若干変わると思います。）

あとは記事更新時にnetlifyでのビルド処理完了後にサイトマップが生成されているはずですので、本番環境のurl/sitemap.xmlにアクセスしてサイトマップが表示されれば完了です。

Google Search Consoleを使用している人はそこでサイトマップの登録をしてちゃんと反映されるか確認してみるといいと思います。

以上です。

Share this post