Next.jsにおけるrobots.txtとsitemap.xmlの設定方法

概要

Next.jsでのサイト公開においてSEO対策をすると思います。そのなかで、Reactにおけるrobots.txt と sitemap.xml の設定についてメモとしてまとめようとおもいます。

ここでは、Next.js+React 環境で
robots.txt と sitemap.xml を設定する手順を、実例とともに解説します。

robots.txt と sitemap.xml の役割

robots.txt : クローラーへのルール

クローラー「どのページを巡回してよいか / ダメか」を伝えるファイルです

• インデックス可否を制御する入口
• 管理画面やAPIエンドポイントへのクロールを防ぐ
• クローラーの負荷を軽減

sitemap.xml : サイトの地図

クローラーに「このサイトにどんなページがあるか」を一覧で伝えるファイルです。

• 新規ページの検知を早める
• 更新頻度や優先度を伝える
• 検索エンジンの効率的なクロールを支援

Next.jsでの基本方針

App Routerでは、従来の静的ファイル配置ではなく、TypeScriptで動的関数生成するのが公式推奨
なとなっています

理由

• 環境による内容の切り替え容易

const baseUrl = process.env.NODE_ENV === "production"
  ? "https://example.com"
  : "http://localhost:3000";

• 動的なルーティングに自動で対応

• ビルド時に最新の状態を反映

robots.txt の設定方法

ファイル作成

app/robots.ts を作成します。

import { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      {
        userAgent: "*",
        allow: "/",
        disallow: ["/api/", "/admin/", "/dashboard/"],
      },
    ],
    sitemap: "https://example.com/sitemap.xml",
  };
}

robots.ts で設定できる主な項目

項目	説明	例
userAgent	対象クローラー	"*", "Googlebot"
allow	クロール許可パス	"/", "/blog/"
disallow	クロール禁止パス	"/api/", "/admin/"
sitemap	sitemap.xmlの場所	"https://example.com/sitemap.xml"

sitemap.xml の設定方法

ファイル作成

app/sitemap.ts を作成します。

パターン1: 静的ページのみ

import { MetadataRoute } from "next";

export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = "https://example.com";

  return [
    {
      url: `${baseUrl}/`,
      lastModified: new Date(),
      changeFrequency: "daily",
      priority: 1,
    },
    {
      url: `${baseUrl}/about`,
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.8,
    },
    {
      url: `${baseUrl}/contact`,
      lastModified: new Date(),
      changeFrequency: "yearly",
      priority: 0.5,
    },
  ];
}

パターン2: 動的ページを含める

import { MetadataRoute } from "next";

// データ取得関数（例）
async function fetchPosts() {
  const res = await fetch("https://api.example.com/posts");
  return res.json();
}

export default async function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = "https://example.com";

  // 動的に記事データを取得
  const posts = await fetchPosts();

  // 静的ページ
  const staticPages = [
    {
      url: `${baseUrl}/`,
      lastModified: new Date(),
      changeFrequency: "daily" as const,
      priority: 1,
    },
    {
      url: `${baseUrl}/about`,
      lastModified: new Date(),
      changeFrequency: "monthly" as const,
      priority: 0.8,
    },
  ];

  // 動的ページ（記事）
  const dynamicPages = posts.map((post: any) => ({
    url: `${baseUrl}/posts/${post.slug}`,
    lastModified: new Date(post.updatedAt),
    changeFrequency: "weekly" as const,
    priority: 0.7,
  }));

  return [...staticPages, ...dynamicPages];
}

sitemap.ts で設定できる主な項目

項目	説明	必須	備考
url	ページURL	○	完全なURL
lastModified	最終更新日時	○	Date型
changeFrequency	更新頻度	×	参考程度
priority	優先度	×	0.0〜1.0

動作確認

ローカルでの確認

dev起動して、

• http://localhost:3000/robots.txt
• http://localhost:3000/sitemap.xml

本番環境での確認

デプロイ後、

• https://example.com/robots.txt
• https://example.com/sitemap.xml

まとめ

• App Routerでは関数ベースで robots / sitemap を生成
• SEO設定もコードで管理すると安全で柔軟

この記事ではApp Routerで関数によってrobots.txtとsitemapを生成する設定方法を解説しました。小規模なサイトでも設定することを忘れずに行い、デプロイするといいかと思います。