TL;DR
Web サイトの中には数多くのページが存在しますけど、これら全てのページに容易にアクセスできるように、そのリンクを一覧化したものがサイトマップなんですね。SEO 対策にも欠かせないこのサイトマップ、Next.js と TypeScript でどのように作成するのか解説します。
| 開発環境 | バージョン |
|---|---|
| Next.js | 13.4.3 |
| TypeScript | 5.0.4 |
| Emotion | 11.11.0 |
| React | 18.2.0 |
next-sitemapは、Next.js プロジェクトのためのサイトマップを自動的に生成する npm パッケージです。それを使ってサイトマップを作成する方法は以下の通りです。
インストール
まずはプロジェクトのルートディレクトリで次のコマンドを実行して、next-sitemapパッケージをインストールします:
npm install next-sitemap
もしくは、yarn を使っている場合は:
yarn add next-sitemap
次に、プロジェクトのルートディレクトリにnext-sitemap.config.jsという名前の新しいファイルを作成します。次に示すのは、基本的な設定の例です:
module.exports = {
siteUrl: 'https://example.com',
generateRobotsTxt: true, // (optional)
// ...other options
}
上記のsiteUrlはあなたのウェブサイトの URL に置き換えてください。generateRobotsTxtオプションはrobots.txtファイルも生成するかどうかを制御します。
最後に、あなたのpackage.jsonファイルにpostbuildスクリプトを追加します。これにより、ビルド後にサイトマップが自動的に生成されます:
"scripts": {
"build": "next build",
"postbuild": "next-sitemap"
}
以上の設定で、Next.js プロジェクトにサイトマップが追加されます。ビルドを行うと、自動的にサイトマップが生成され、/public/sitemap.xmlに保存されます。
なお、next-sitemapの詳細な設定やオプションについては、公式ドキュメンテーションを参照してください。
まとめ
Next.js と TypeScript を用いて、サイトマップの生成と設定が行えましたね。これらのステップに従うことで、サイトマップの設定が容易になり、SEO 対策とユーザビリティの向上につながります。
以上がサイトマップの設定方法についての解説です。最後になりますが、以下のリンクは、このトピックに関連する参考資料です。ぜひご覧になってみてください。