Next.jsでインタラクティブなローカライズされたマップを構築する

はじめに

"Escape from Duckov" プロジェクトでは、複雑でインタラクティブなマップを世界中のユーザーに提供するという課題に直面しました。この記事では、Next.jsのサーバーサイドレンダリング、静的サイト生成、国際化などの強力な機能を活用し、堅牢でローカライズされたインタラクティブマップシステムを構築するための私たちのアプローチを詳しく説明します。

インタラクティブマップにNext.jsを選ぶ理由

Next.jsは、いくつかの主要な利点があるため、このタスクに最適な選択肢であることが証明されました。

• サーバーサイドレンダリング (SSR) と静的サイト生成 (SSG): パフォーマンスとSEOにとって非常に重要であり、マップページをデータとともに事前にレンダリングすることで、高速な読み込み時間と発見可能性の向上を保証します。
• ファイルシステムベースのルーティング: 個々のマップの動的ルート（例：/maps/farm-town、/maps/ground-zero）の作成を簡素化します。
• APIルート: この特定の例ではマップデータの取得に直接使用されていませんが（データはサーバーコンポーネントで直接取得されます）、Next.jsのAPIルートは、必要に応じてバックエンド機能を構築するためのシームレスな方法を提供します。
• 組み込みの国際化: Next.jsのi18n機能は、ローカライズされたマップコンテンツを提供するための基本です。

マップデータの構造と取得

私たちのマップデータは、グループ、カテゴリ、個々の場所などのさまざまなマップ要素をサポートするように構造化されています。このデータはサーバーで取得および処理されます。

• getMaps と getMap: これらのユーティリティ関数（lib/maps.tsにあります）は、マップの全体リストと特定のマップの詳細情報をそれぞれ取得する役割を担っています。
• ローカライズされたコンテンツ: グループ、カテゴリ、場所のマップ固有の翻訳は、JSONファイル（例：src/content/[locale]/maps/[datasetKey].json）に保存されます。これにより、マップ要素の柔軟で管理しやすいローカライズが可能になります。loadDatasetTranslations関数は、これらの翻訳を動的にロードし、特定のロケールの翻訳が利用できない場合は英語にフォールバックします。

インタラクティブマップコンポーネント (MapInteractiveUI)

インタラクティブマップシステムの核となるのは、MapInteractiveUIコンポーネントです。このクライアントサイドコンポーネントは、必要なすべてのマップデータ（マップ情報、グループ、カテゴリ、場所）をサーバーコンポーネントの親からプロップとして受け取ります。その役割は次のとおりです。

• マップを視覚的にレンダリングする。
• ズーム、パン、関心のあるポイントのクリックなどのユーザーインタラクションを処理する。
• ユーザーの選択に基づいて動的な情報を表示する。

国際化 (i18n) の実践

国際化はマップシステムに深く統合されています。

• ロケール対応のデータ取得: マップデータと翻訳はアクティブなロケールに基づいて取得され、ユーザーが希望する言語でコンテンツを確実に表示できるようにします。
• 動的ルーティング: Next.jsの国際化されたルーティング（/[locale]/maps/[slug]）により、マップのローカライズされた各バージョンが独自のURLを持つことが保証されます。
• メタデータローカライズ: generateMetadataは、現在のロケールに基づいて各マップページのタイトルと説明を動的に設定し、異なる言語バージョンのSEOを向上させます。

メタデータとSEO

Next.jsのgenerateMetadataとgenerateStaticParams関数は、マップページを検索エンジンとパフォーマンスのために最適化する上で重要な役割を果たします。

• generateMetadata: サーバーで実行されるこの関数は、各マップページの動的メタデータ（タイトル、説明、Open Graphタグ、Twitterカードデータ）を生成します。これは、ソーシャルメディアや検索結果でマップリンクがどのように表示されるかにとって非常に重要です。
• generateStaticParams: すべての可能なlocaleとslugの組み合わせを事前に生成することで、ビルド時にすべてのマップページを静的に生成できます。これにより、コンテンツがCDNから直接提供されるため、非常に高速なページ読み込みが実現します。

結論

Next.jsの強力な機能と適切に構造化されたデータアプローチを組み合わせることで、私たちは「Escape from Duckov」のために、高性能でインタラクティブ、かつ完全にローカライズされたマップシステムを構築しました。このアーキテクチャは、ユーザーエクスペリエンスを向上させるだけでなく、将来の拡張のためのスケーラブルで保守可能なソリューションも提供します。