next.jsでサイトマップを詳しく解説！基本から実践まで対応

2025 12/07

2025/12/07

はじめに

目的

この文書は、Next.jsプロジェクトでsitemap.xmlを効率よく生成する方法をやさしく解説します。静的ページと動的ページの両方を扱い、検索エンジンに適したサイトマップ作成の実務的な手順と考え方をお伝えします。

誰に向けて

Next.jsでサイトを作っている開発者
SEOを意識してサイト運用を行いたい方
実装と運用の両面で実践的なノウハウを求める方

前提知識

Next.jsの基本的なルーティングやプロジェクト構成の理解があると読みやすいです。コード例はTypeScriptを想定しますが、JavaScriptでも応用できます。

本書の構成

第2章: Next.jsでサイトマップが重要な理由
第3章: サイトマップ実装パターンの全体像
第4章: もっともシンプルな方法：手書きのsitemap.xml
第5章: App Routerでsitemap.tsを使う基本実装
第6章: 動的ルーティングを含めたsitemap.tsの実装

各章は実例を中心に、すぐに使える手順を重視して解説します。

Next.jsでサイトマップが重要な理由

はじめに

サイトマップ（sitemap.xml）は、サイト内のURL一覧を検索エンジンに伝えるためのファイルです。Next.jsのように動的にページを作るサイトでは、サイトマップがあると検索エンジンが見つけやすくなります。

重要な理由

クロール効率の向上：検索エンジンに優先して巡回してほしいページを明示できます。大量のページや深い階層があると効果が大きいです。
インデックス促進：新しいページや更新を速く認識してもらえます。例えばブログ記事や商品ページを早く検索結果に反映させたい場合に役立ちます。
動的ルーティングとの相性：Next.jsでは動的に生成するページ（製品IDやユーザー名など）が多くなります。手作業で管理するのは手間なので、自動生成で確実に一覧化できます。
クロール予算の節約：重要でないページ（管理ページなど）を除外して、重要なページにクローラーを集中させられます。

具体的な例

ヘッドレスCMSと組み合わせる場合、APIから取得した記事一覧でsitemapを自動生成します。
多数の商品を扱うECサイトでは、商品ごとのページURLを自動で列挙しておくと検索に取り上げられやすくなります。

小規模な静的サイトなら手書きのsitemap.xmlで足りることもあります。しかし、多くのページや動的生成があるNext.jsサイトでは自動生成を検討してください。したがって、サイトマップを作り、Google Search Consoleへ送信し、robots.txtにも場所を書いておくことをおすすめします。

サイトマップ実装パターンの全体像

Next.jsでサイトマップを作る方法は大きく4つに分かれます。ここでは特徴と利用シーンを具体例で分かりやすく説明します。

1. 完全静的（手書きの sitemap.xml）

最も単純な方法です。小規模サイトやほとんど更新しないサイトに向きます。例：/public/sitemap.xml を手で作成して配備します。メリットは実装が簡単でミスが少ないこと、デメリットは更新のたびに手作業が必要なことです。

2. Next.jsのルートとしてsitemap.ts/sitemap.jsを実装

App RouterやPages Routerのルートとしてsitemapを動的に生成します。例：/app/sitemap.tsでサイト内のページ一覧を読み取り、リクエスト時またはビルド時にXMLを返します。メリットはコードで最新化できること、デメリットは実装の手間が増える点です。

3. next-sitemapなどのライブラリを使う（ビルド後出力）

ビルドプロセスで自動的にXMLファイルを生成します。サイトマップの設定を集中管理でき、動的ルートの扱いも比較的簡単です。例：ビルド時に複数ファイルのsitemapを出力する設定を行います。メリットは自動化と柔軟性、デメリットは外部依存が増える点です。

4. 複数ファイル（インデックス型）を生成

ページ数が多い大規模サイト向けです。sitemap_index.xmlを作り、分割されたsitemap-1.xmlなどをリンクします。メリットは検索エンジンの処理が速くなること、デメリットは管理が複雑になることです。

各パターンは規模や更新頻度、運用チームのスキルに合わせて選んでください。

もっともシンプルな方法：手書きのsitemap.xml

概要

public/sitemap.xmlを作り、XMLを直接記述する方法です。Next.js側に特別なコードは不要で、公開フォルダに置くだけで検索エンジンが参照できます。

作り方（手順）

プロジェクトのpublicフォルダにsitemap.xmlを作成します。
各URLを要素で追加します。
ファイルをコミットしてデプロイします。

サンプルXML

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/</loc>
    <lastmod>2025-01-01</lastmod>
    <changefreq>weekly</changefreq>
  </url>
</urlset>

メリット

実装が非常に簡単です。
Next.jsの設定やランタイム処理が不要です。

デメリット

URLを手で追加するため更新コストが高いです。
CMSやAPIで生成される動的ページには向きません。

いつ使うべきか

小規模でページ数が少ない固定サイト向けです。ページが増える場合や頻繁に更新する場合は、自動生成する方法を検討してください。

App Routerでsitemap.tsを使う基本実装

Next.jsのappディレクトリでは、sitemap.ts（またはsitemap.js）を置くだけで/sitemap.xmlが自動作成されます。やることはシンプルで、sitemap()という関数をエクスポートして、URL情報の配列を返すだけです。

例として静的なページだけを登録する基本形を示します。配列にパスを並べてmapで変換すると分かりやすいです。

// app/sitemap.ts
export default function sitemap() {
  const paths = ['/', '/about', '/contact']
  return paths.map((path) => ({
    url: `https://example.com${path}`,
    lastModified: new Date().toISOString(),
  }))
}

ここで使う主なキーはurl（必須）とlastModified（任意）です。urlは完全なURLを指定します。lastModifiedは検索エンジンに更新日を伝えるために使います。

この方法の利点は、Next.jsの内部でXML生成を扱ってくれるため、自分でXMLを書く必要がない点です。静的なサイトならこのまま十分使えます。将来的にデータベースやCMSから取得した動的なURLを追加する場合は、関数内でフェッチして配列を構築すれば対応できます。

動的ルーティングを含めたsitemap.tsの実装

App Routerで動的ルート（例: /blog/[slug]）をサイトマップに含める流れを、分かりやすく説明します。

概要
動的ルートはデータベースやCMSのID・slugから生成します。
sitemap.ts内で非同期に全件を取得し、mapでURL配列に変換します。
実装のポイント
ドメインを定数にまとめる（例: const domain = ‘https://example.com’）。
非同期関数 sitemap() でデータを取得する（fetchやDBクエリ）。
取得した配列を map して { url, lastModified } 形式で返す。
サンプルコード

// app/sitemap.ts
const domain = 'https://example.com'

async function getAllPosts() {
  // DBやCMSからslug, updatedAtを取得する関数
  return [{ slug: 'hello-world', updatedAt: '2024-01-01' }]
}

export default async function sitemap() {
  const posts = await getAllPosts()

  const dynamicUrls = posts.map(post => ({
    url: `${domain}/blog/${post.slug}`,
    lastModified: new Date(post.updatedAt)
  }))

  // 固定ページも追加
  const staticUrls = [
    { url: `${domain}/`, lastModified: new Date() }
  ]

  return [...staticUrls, ...dynamicUrls]
}