【ITニュース解説】How to Automate Sitemap Generation in Next.js

Webサイトがインターネット上で多くの人に見つけられるためには、検索エンジンに正しくサイトの情報を伝えることが非常に重要だ。そのための「地図」と「案内役」の役割を果たすのが、Sitemapとrobots.txtという二つのファイルである。

Sitemapは、Webサイト内に存在するすべてのURLや、それぞれのページの最終更新日時、更新頻度、そしてページごとの重要度などを検索エンジンに伝えるXML形式のファイルだ。これを検索エンジンに知らせることで、サイトの構造が明確になり、新しいページが追加されたり、既存のページが更新されたりした際に、検索エンジンが迅速にその変更を認識し、検索結果に反映させやすくなる。特に、サイト内のリンク構造が複雑で、検索エンジンがすべてのページを見つけにくい場合などにSitemapは非常に役立つ。

一方、robots.txtは、検索エンジンのクローラー（Webサイトを巡回して情報を収集するプログラム）に対して、サイト内のどの部分にアクセスしても良いか、あるいはアクセスしてはいけないかを指示するファイルだ。例えば、管理画面や個人情報を含むページなど、検索結果に表示されたくないページへのアクセスを制限できる。また、このrobots.txtファイルの中にSitemapの場所を記述しておくことで、検索エンジンは迷うことなくSitemapを見つけ、サイト全体の情報を効率的に収集できるようになる。

Next.jsのような現代的なWeb開発フレームワークでは、ページの作成方法が多様であり、静的に生成されるページ、ユーザーの要求に応じてサーバー側で生成されるページ、動的なURLを持つページなどが混在する。このような複雑なサイト構造を持つ場合、Sitemapやrobots.txtを手作業で作成し、常に最新の状態に保つことは非常に手間がかかり、ミスも発生しやすい。サイトのページが増えたり、URLが変更されたりするたびに手動で更新するのは現実的ではない。

そこで登場するのが、「next-sitemap」というツールである。これは、Next.jsで構築されたWebサイトのために、Sitemapとrobots.txtの生成プロセスを自動化してくれる便利なパッケージだ。next-sitemapを使うことで、開発者はサイトの構造やページ内容に集中でき、Sitemapやrobots.txtの作成・更新という手間のかかる作業から解放される。

next-sitemapは、Next.jsプロジェクト内のルーティング（ページのパス）を自動的に解析し、それを基にSitemap XMLファイルを生成する。静的なページだけでなく、動的なパスを持つページや、サーバー側でレンダリングされるページもすべて含めて対応できる点が大きな強みだ。また、Sitemapファイルが大きくなりすぎた場合には、自動的に複数のファイルに分割し、それらをまとめる「インデックスSitemap」も生成してくれるため、大規模なWebサイトでも安心して利用できる。さらに、オプションとしてrobots.txtファイルも生成し、生成されたSitemapの場所を自動的に記述してくれる。

このツールの主なメリットは、開発の手間が大幅に削減されること、手動によるミスがなくなること、Sitemapとrobots.txtの内容に一貫性が保たれること、そしてサイトの規模が大きくなっても柔軟に対応できるスケーラビリティが挙げられる。Next.jsの「pages」ディレクトリと新しい「app」ディレクトリの両方に対応しており、サーバーサイドでの動的なSitemap生成もサポートしているため、現代のNext.js開発において非常に強力な味方となる。

next-sitemapをプロジェクトに導入する手順は比較的シンプルである。まず、パッケージマネージャー（yarnやnpm）を使ってプロジェクトにnext-sitemapを追加する。次に、プロジェクトのルートディレクトリに「next-sitemap.config.js」という設定ファイルを作成する。このファイルには、Webサイトの基本URL（siteUrl）や、robots.txtを生成するかどうか（generateRobotsTxt）といった、基本的な設定を記述する。例えば、siteUrl: 'https://example.com'のように設定する。

設定ファイルを作成したら、Webサイトのビルドプロセスにnext-sitemapを組み込む必要がある。通常、Next.jsプロジェクトのpackage.jsonファイルにあるscriptsセクションに、"postbuild": "next-sitemap"というコマンドを追加する。これにより、next buildコマンドが実行され、Webサイトがビルドされた後に、自動的にnext-sitemapが実行されてSitemapとrobots.txtが生成されるようになる。生成されたファイルは、Webサイトの公開用フォルダ（通常はpublic/フォルダ）に配置され、https://yourdomain.com/sitemap.xmlやhttps://yourdomain.com/robots.txtといったURLでアクセスできるようになる。

next-sitemapは非常に柔軟なカスタマイズが可能である。たとえば、サイト全体のデフォルトの更新頻度（changefreq）や重要度（priority）を設定できる。特定のページをSitemapから除外したい場合は、excludeオプションに除外したいパスのパターンを指定する。さらに、transformという高度な関数を使うことで、各ページに対して個別に更新頻度や重要度を設定したり、条件に基づいてSitemapから除外したりすることもできる。例えば、ブログ記事のページだけ更新頻度を「毎日」、重要度を高く設定し、管理画面のページはSitemapから完全に除外するといった制御が可能だ。また、Next.jsのルーティングには存在しないが、Sitemapに含めたい追加のパスがある場合は、additionalPaths関数を利用して動的に追加できる。多言語サイトの場合には、alternateRefsオプションで代替の言語バージョンを示すURLをSitemapに含めることも可能だ。

大規模なWebサイトや、データベースから動的にコンテンツを取得するようなサイトでは、Sitemapの管理に特別な配慮が必要となる。next-sitemapは、sitemapSizeオプションを設定することで、一つのSitemapファイルに含むURLの最大数を指定できる。この数を超えると、sitemap-0.xml、sitemap-1.xmlのように複数のSitemapファイルに自動的に分割され、それらをすべて参照する親となるsitemap.xml（インデックスSitemap）が生成される。これにより、ファイルサイズが大きくなりすぎず、管理しやすくなる。

さらに、Next.js 13のApp Directoryのように、ビルド時にはすべてのURLが確定しない動的なコンテンツが多いサイトにも対応している。next-sitemapは、getServerSideSitemapやgetServerSideSitemapIndexといった専用のAPI関数を提供しており、これらをNext.jsのAPIルートやApp Directoryのroute.tsファイル内で利用することで、サーバーサイドでリクエストがあった際にリアルタイムでSitemapを生成できる。例えば、データベースから取得した最新のブログ記事のURLリストを基にSitemapを生成し、検索エンジンに提供することが可能になる。この場合、next-sitemapの設定ファイルでその動的なSitemapパスを静的生成の対象から除外し、robots.txtからは参照するように設定する必要がある。

robots.txtの生成に関しても、next-sitemapは詳細な設定オプションを提供している。robotsTxtOptionsオブジェクト内のpoliciesプロパティを使うことで、どのユーザーエージェント（検索エンジンクローラーの種類）に対して、サイト内のどのパスへのアクセスを許可（allow）し、どのパスを禁止（disallow）するかを細かく定義できる。また、additionalSitemapsというオプションを使って、next-sitemapが自動生成しない、外部のSitemapファイルや手動で作成したSitemapのURLをrobots.txtに含めることも可能だ。これにより、検索エンジンはすべての関連するSitemapを一度に発見できるようになる。

最終的に、next-sitemapを導入してWebサイトをデプロイ（公開）すると、生成されたSitemapとrobots.txtは公開されたWebサイトのルートに配置される。その後、Google Search ConsoleやBing Webmaster Toolsといった検索エンジンが提供するツールに、生成されたSitemap（特にインデックスSitemap）のURLを登録することで、検索エンジンはサイトの情報を効率的にクロールし、検索結果の表示を改善してくれるようになる。このように、next-sitemapはNext.jsプロジェクトのSEO（検索エンジン最適化）対策を強力にサポートし、初心者でも簡単にプロフェッショナルなWebサイト運用を実現するための重要なツールと言える。