Next.jsのSSGでサイトマップをさくっと生成する

Next.jsのSSGでサイトマップをさくっと生成する Programming

はじめに

今回はnext-sitemap というパッケージを使用してサイトマップをさくっと生成する方法です。

https://github.com/iamvishnusankar/next-sitemap

自前で生成することも可能ですが、今回はパッケージでさくっと作りたかったので採用しました。

手順

パッケージのインストール

まずはパッケージをインストールします。

yarn add next-sitemap -D

package.jsonに追加されます。

設定ファイルの追加

インストールしたらプロジェクトルートにnext-sitemap.js という名前のファイルを作成し、以下のコードを記述します。

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

siteUrl は名前の通りサイトのurlを記入します。

generateRobotsTxt はtrueにしておくことで、robots.txt を生成してくれるので、不要であればfalseで大丈夫です。

outDirsitemap.xmlが出力される場所を指定します。Next.jsのSSGはoutディレクトリに出力するので、./out を指定しています。

その他オプションがありますが、GithubのREADMEで詳細を確認できます。

コマンドの設定

package.jsonのスクリプトに"postbuild": "next-sitemap" というのコマンドを追加します。

package.js
{
  "build": "next build && next export",
  "postbuild": "next-sitemap"
}

postbuild は npm の機能で、postxxx というタスクを定義すると、xxx タスクの完了後に自動的に実行されます。

なので、buildの後にnext-sitemap が実行されます。

サイトマップの生成

あとはビルドをするだけで、指定してある./out ディレクトリにsitemap.xmlrobots.txt が生成されます。

yarn build

Google Search Consoleに登録

サイトマップを作成したらGoogle Search ConsoleにURLを登録しましょう。

↓こちらを参考に設定してサイトマップのURLを明示しておきます。

サイトマップの作成と送信 | Google 検索セントラル  |  Google Developers