Next.jsでサイトマップ(sitemap.xml, robots.txt)を生成する

　Next.jsでサイトマップ(sitemap.xml、robots.txt)を生成するにはnext-sitemapというライブラリが便利です。今回はその使い方まとめます。

　Githubはこちら↓

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

next-sitemapのインストール

ビルド時のみ使うので-Dを付けます。

npm install -D next-sitemap

設定ファイル作成

　以下のような設定ファイルをnext-sitemap.jsという名前でルートディレクトリ直下(package.jsonと同じ階層)に配置します。

module.exports = {
  siteUrl: <デプロイ先のURL>,
  generateRobotsTxt: true,  // robots.txtを作成するか
}

サイトマップ(sitemap.xml, robots.txt)の生成

ビルドコマンド実行後にnext-sitemapコマンドで生成します。

// nextのビルド
next build
// ビルド後にsitemap生成
next-sitemap

実行後にpublicフォルダ配下にrobots.txt, sitemap.xmlが生成されることが分かります。

publicに配置されるのでそのままpublicに配置しておけばVercelとかでデプロイしてもサイトマップがちゃんと取得できます。

そのほか、Next.jsでGoogle analyticsの設定やOGPパラメータの設定方法についてもまとめているのでよかったら見てみてください！