11tyからNext.js App Routerへの移行：SEOとパフォーマンスを両立させる最新アーキテクチャ

## 序論 Web技術の進化は止まることを知りません。私たちのトレンド分析サイト「日本のトレンド」も、より良いユーザー体験と高い拡張性を求めて、長年愛用してきた静的サイトジェネレーター **11ty (Eleventy)** から、最新の **Next.js App Router** アーキテクチャへと全面的な移行を行いました。本記事では、なぜ移行を決断したのか、そして移行プロセスで直面した技術的な課題とその解決策について詳しく解説します。 ## 1. なぜ Next.js へ移行したのか？ ### 1.1 11ty の限界と動的ニーズの増大 11ty は素晴らしい静的サイトジェネレーターであり、ビルド速度も高速です。しかし、私たちのサイトは「リアルタイム性」が命です。1時間ごとに変わるトレンドデータ、ユーザーによる任意の時間指定検索、そして世界中の地域データの追加など、動的な要件が増えるにつれ、完全な静的ビルド（SSG）だけでは対応が難しくなってきました。 ### 1.2 Next.js App Router の魅力 Next.js、特にバージョン13以降で導入された **App Router** は、私たちのニーズに完璧に合致しました。 * **Server Components (RSC):** サーバー側でデータを取得し、クライアントには軽量なHTMLだけを送ることで、パフォーマンスとSEOを両立できます。 * **動的ルーティング:** `/trend/[date]/[hour]` のような動的なURLを簡単に生成し、必要に応じてキャッシュできます。 * **Edge Runtime:** Cloudflare Pages などのエッジ環境での動作をサポートし、世界中どこからでも低遅延でアクセス可能です。 ## 2. アーキテクチャの刷新：主な技術スタック 移行に伴い、技術スタックも刷新しました。 * **フレームワーク:** Next.js 15 (App Router) * **データベース:** Supabase (PostgreSQL) * **スタイリング:** Tailwind CSS * **デプロイ:** Vercel / Cloudflare Pages この組み合わせにより、開発効率が向上しただけでなく、サイトの保守性も大幅に高まりました。 ## 3. 移行における技術的挑戦と解決策 ### 3.1 過去データの「オンデマンド・スクレイピング」 最も大きな課題は、膨大な過去のトレンドデータをどう扱うかでした。全てを事前にデータベースに入れておくのはコストがかかります。そこで、私たちは「**オンデマンド・スクレイピング（On-demand Scraping）**」アーキテクチャを採用しました。 1. ユーザーが特定の日時（例：2024年1月1日 15:00）をリクエストします。 2. まずデータベースを確認します。データがあれば即座に表示します（キャッシュヒット）。 3. データがない場合（キャッシュミス）、バックグラウンドでスクレイピング・ボットがその瞬間のアーカイブデータを取得しに行きます。 4. 取得したデータをデータベースに保存し、ユーザーに返します。 この仕組みにより、ストレージコストを最小限に抑えつつ、理論上無限の履歴データを提供できるようになりました。 ### 3.2 SEO の強化 (Metadata API) 旧サイトではメタタグの管理が手動でしたが、Next.js の **Metadata API** を活用することで、動的なSEO設定が可能になりました。各地域ページやブログ記事ごとに、タイトル、ディスクリプション、Canonical URL、OGP画像などを自動生成しています。これにより、Google 検索結果での表示が最適化され、クリック率の向上が期待できます。 ### 3.3 クライアントサイドでの自動補完 (Backfill) トップページでは最新のトレンドを表示しますが、時にはデータ取得が遅れることもあります。そこで、クライアントサイド（ブラウザ）で動作する `BackfillManager` コンポーネントを開発しました。 ページロード時にデータが不足している場合、ブラウザが自動的にバックグラウンドで不足分のデータをリクエストし、画面をリフレッシュします。これにより、ユーザーは待つことなく常に最新かつ完全なリストを見ることができます。 ## 4. パフォーマンスとユーザー体験の向上 ### 4.1 正確な時刻表示 (タイムゾーン対応) 世界中のユーザーが利用するため、時刻表示は重要です。以前は日本時間（JST）で固定されていましたが、新しいサイトでは **Client Component** を活用し、ユーザーのブラウザのタイムゾーンに合わせて自動的に時刻を変換して表示するようにしました。これにより、海外のユーザーも混乱することなくトレンドを確認できます。 ### 4.2 高速なページ遷移 Next.js の `Link` コンポーネントによるプリフェッチ機能のおかげで、ページ遷移が爆発的に速くなりました。ブログからトレンド一覧へ、あるいは地域間を移動する際も、ほぼ待ち時間がありません。 ## 結論 11ty から Next.js への移行は、単なるフレームワークの変更以上の価値をもたらしました。それは、静的な情報サイトから、動的でインテリジェントなWebアプリケーションへの進化です。 私たちは今後も、この新しいアーキテクチャを基盤として、より多くの地域データ、より詳細な分析機能、そしてより良いユーザー体験を提供していきます。新しくなった「日本のトレンド」を、ぜひご活用ください。