Next.js App Routerで4万件の多言語動的サイトマップを実装する方法

はじめに

Next.js App Routerを使用した4万件以上のコンテンツを持つ大規模多言語対応サイトでの動的サイトマップ実装について共有する。

結論から

Next.jsのサイトマップAPIと24時間キャッシュを組み合わせることで、大規模サイトでも実用的な動的サイトマップを実装できた。
フロントエンドのビルド時間への影響を最小限に抑えつつ、日次でのデータ更新が可能となる。

開発環境

Frontend: Next.js (App Router)
Backend: Express + MongoDB
Infrastructure: Vercel (Frontend), Heroku (Backend)
言語数: 2言語

状況

ページが20,000件以上存在
各ページに2言語のバリエーション（計40,000 URL以上）
データの更新が日次で発生
SEO要件としてサイトマップの提供が必須

サイトマップ生成について

サイトマップ生成のアプローチ

静的生成：ビルド時に全URLを生成
動的生成：リクエスト時に都度生成
ISR：静的生成と動的更新のハイブリッド

それぞれの特徴は以下の通り：

静的生成
- レスポンス速度が速い
- サーバー負荷が少ない
- ビルド時間が長くなる
- データ更新への即時対応が難しい
動的生成
- 最新データの反映が容易
- ビルド時間への影響なし
- サーバー負荷が高い
- レスポンス時間が遅くなる可能性
ISR
- 静的生成と動的更新のバランスが取れる
- キャッシュ制御が容易
- 実装が若干複雑になる

Sitemap生成については過去の記事も参考に。
Next.js App Routerでのnext-intlを用いた多言語Sitemap実装

解決方法

Next.jsのサイトマップAPIと24時間キャッシュを組み合わせた実装を採用した。

// app/sitemap.ts
import { MetadataRoute } from "next";

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

const API_BASE_URL = process.env.NODE_ENV === "production"
  ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/util`
  : "http://localhost:3500/api/util";

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const locales = ["en", "ja"];
  const routes = ["/", "/about", "/products", "/contact"];
  
  // Generate static page
  const staticRoutes = routes.flatMap((route) =>
    locales.map((locale) => ({
      url: `${BASE_URL}/${locale}${route === "/" ? "" : route}`,
      lastModified: new Date(),
      changeFrequency: "monthly" as const,
      priority: route === "/" ? 1 : 0.8,
    }))
  );

  try {
    // product page
    const response = await fetch(`${API_BASE_URL}/products`, {
      next: { revalidate: 86400 },
      headers: { "Cache-Control": "public, max-age=86400" },
    });

    if (!response.ok) {
      throw new Error(`Failed to fetch products: ${response.statusText}`);
    }

    const products = await response.json();

    // generate product page url
    const productRoutes = products.flatMap((product: any) =>
      locales.map((locale) => ({
        url: `${BASE_URL}/${locale}/product/${product.id}`,
        lastModified: new Date(product.updatedAt),
        changeFrequency: "daily" as const,
        priority: 0.7,
      }))
    );

    return [...staticRoutes, ...productRoutes];

  } catch (error) {
    console.error("Error generating sitemap:", error);
    return staticRoutes;
  }
}

Backend API:

// Express route handler
router.get("/products", async (req, res) => {
  try {
    // Fetch data from MongoDB
    const products = await Product.find(
      {},
      {
        id: 1,
        lastUpdateDate: 1,
      }
    ).lean();

    res.json(products);
  } catch (error) {
    console.error("Failed to fetch products:", error);
    res.status(500).json({
      message: "Error fetching products",
      error: error instanceof Error ? error.message : String(error),
    });
  }
});

実装結果

総URL数：42000件
ファイルサイズ：4.6MB
生成時間：5秒未満
ビルド時間への影響：最小限
キャッシュ有効期間：24時間

確認方法

生成されたsitemap.xmlは開発環境のlocalhost:3000/sitemap.xmlで確認可能である。（通常の設定であれば）

まとめ

Next.jsのSitemap APIは大規模多言語サイトでも実装しようと思えば可能。
キャッシュ戦略とエラーハンドリングを適切に実装することで、パフォーマンスとメンテナンス性の両立が可能である。

参考文献