Next.jsでサイトマップを動的に生成する

サイトマップ（sitemap.xml）の作成

Google の検索エンジンに見つけてもらうための機能です。サイトの情報を検索エンジンに教えるための構造化されたデータのファイルです。SEO を高める効果があるそうです。

サイトマップについて | Google 検索セントラル | Documentation | Google for Developers

サイトマップとは、サイト内の URL を一覧化し、Google のクロール効率化に役立つファイルです。sitemap.xml とその他形式、サイトマップの仕組みや必要性について解説します。

Google for Developers

Next.js では、sitemap.ts を作るだけで自動的に sitemap.xml を生成してくれます。

Metadata Files: sitemap.xml | Next.js

API Reference for the sitemap.xml file.

nextjs.org

実装手順

app の下に sitemap.ts を作成します。当ブログではこんな感じです。

import { MetadataRoute } from 'next'
import { getAllPosts, getAllUniqueTags } from '@/lib/posts'
import { getAllCategories } from '@/lib/categories'
 
const WEBSITE_URL = process.env.NEXT_PUBLIC_WEBSITE_URL
 
export default function sitemap(): MetadataRoute.Sitemap {
  const allPosts = getAllPosts()
  // 全記事ページを取得
  const posts = allPosts.map((post) => ({
    url: `${WEBSITE_URL}/post/${post.category.slug}/${post.slug}`,
    lastModified: new Date(post.frontmatter.date),
    changeFrequency: 'daily' as const,
    priority: 0.8,
  }))
  // 全カテゴリーを取得
  const categories = getAllCategories().map((cat) => ({
    url: `${WEBSITE_URL}/category/${cat.slug}`,
    lastModified: new Date(),
    changeFrequency: 'weekly' as const,
    priority: 0.5,
  }))
  // 全タグを取得
  const tags = getAllUniqueTags().map((tag) => ({
    url: `${WEBSITE_URL}/tag/${encodeURIComponent(tag)}`,
    lastModified: new Date(),
    changeFrequency: 'weekly' as const,
    priority: 0.5,
  }))
  // 静的ページ
  const staticPages = [
    {
      url: WEBSITE_URL,
      lastModified: new Date(),
      changeFrequency: 'daily' as const,
      priority: 1.0,
    },
    {
      url: `${WEBSITE_URL}/category`,
      lastModified: new Date(),
      changeFrequency: 'weekly' as const,
      priority: 0.6,
    },
    {
      url: `${WEBSITE_URL}/tag`,
      lastModified: new Date(),
      changeFrequency: 'weekly' as const,
      priority: 0.6,
    },
  ]
  return [...staticPages, ...posts, ...categories, ...tags]
}

動作確認のため、ブラウザでhttp://localhost:3000/sitemap.xmlにアクセスします。 XML が表示されれば成功です。

<urlset>
  <url>
    <loc>http://localhost:3000</loc>
    <lastmod>2025-12-12T...</lastmod>
    <changefreq>daily</changefreq>
    <priority>1</priority>
  </url>
  <url>
    ...
  </url>
  ...
</urlset>

robots.txt の作成

検索エンジンに「ここにサイトマップがあるぞ」と教えるための機能です。

Metadata Files: robots.txt | Next.js

API Reference for robots.txt file.

nextjs.org

app の下に robots.ts を作成します。

import { MetadataRoute } from 'next'
 
const WEBSITE_URL = process.env.NEXT_PUBLIC_WEBSITE_URL
 
export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      // 管理画面など隠したいパスがあれば設定
      // disallow: '/hoge/',
    },
    sitemap: `${WEBSITE_URL}/sitemap.xml`,
  }
}

これで完了です。Google に通知されるはずです。

お役に立てれば幸いです 💕

参考サイト

Next.js 15 でサイトマップを生成するガイド

Zenn