はじめに
Gemini Lab は「Gemini の情報を整理して届ける」ことが目的のサイトですが、その裏側ではいくつかの技術的な工夫が効いています。この記事では、サイトの構築・運用で採用している技術スタックと、その選定理由を紹介します。
同じ構成で運営されている姉妹サイト（Claude Lab、Antigravity Lab、Rork Lab）との共通基盤でもあるため、技術的なナレッジサイトの構築に興味がある方の参考になれば幸いです。
フレームワーク: Next.js 16 + TypeScript
Gemini Lab は Next.js 16 の App Router を使用しています。App Router は React Server Components をベースとしたルーティング方式で、サーバーサイドレンダリングとクライアントサイドの柔軟な切り替えが可能です。
TypeScript を採用している理由は、記事データの型定義やコンポーネント間のインターフェースを厳密に管理するためです。フロントマターの構造がズレたときにビルド時点で検知できるのは大きなメリットです。
ホスティング: Cloudflare Workers
Cloudflare Workers は、エッジでコードを実行するサーバーレスプラットフォームです。Next.js を Workers 上で動かすために、@opennextjs/cloudflare（OpenNext）というアダプタを使用しています。
この構成の利点は、世界中のエッジロケーションでサイトが配信されるため、日本からも海外からも低レイテンシでアクセスできることです。
デプロイは GitHub への push をトリガーに自動実行されます。Cloudflare Pages を CI/CD ランナーとして使用し、ビルド後に wrangler deploy で Worker にデプロイするという 2 段構成です。
コンテンツ管理: MDX + generate-content.mjs
記事は MDX 形式で管理しています。MDX は Markdown に JSX を埋め込める拡張形式で、コードブロックやインタラクティブなコンポーネントを自然に記事内に配置できます。
記事のフロントマターには、タイトル、slug、カテゴリ、レベル、日付、著者、説明、タグなどのメタデータを YAML 形式で記述します。日付は YYYY-MM-DDTHH:MM の ISO 8601 形式を使用しており、同日に複数の記事を公開した場合でも正確な時系列ソートが可能です。
ビルド時には generate-content.mjs というスクリプトが MDX ファイルを走査し、フロントマターを解析してJSON インデックスを生成します。このJSONファイルがサイト上の記事一覧やブログ一覧の表示に使われます。
多言語対応: next-intl v4
全ページが日本語（ja）と英語（en）の 2 言語に対応しています。ルーティングは app/[locale]/ 構造で、next-intl v4 が言語切り替えとメッセージの管理を担当しています。
記事本文は言語ごとに別ファイル（content/articles/ja/... と content/articles/en/...）として管理しているため、直訳ではなく、それぞれの言語に最適化された表現で執筆できます。
シンタックスハイライト: rehype-pretty-code + shiki
技術記事ではコードブロックの見やすさが重要です。rehype-pretty-code と shiki の組み合わせにより、ダークモードとライトモードの両方で適切な配色のハイライトを実現しています。
shiki はビルド時にハイライトを生成するため、クライアント側の JavaScript バンドルに影響を与えません。
SEO 対策
JSON-LD 構造化データ
各ページに適切な JSON-LD を埋め込んでいます。WebSite、Article、FAQPage、BreadcrumbList、Speakable など、Google の検索結果でリッチスニペットとして表示されるためのスキーマを網羅しています。
AI 検索エンジン対応
llms.txt と llms-full.txt をサイトルートに配置しています。これは AI 検索エンジンやチャットボットがサイトの内容を効率的に理解するための規格で、AI SEO の一環として重要度が増しています。
自動コンテンツ更新
Gemini Lab では、Cowork のスケジュールタスク機能を使って記事の自動生成を行っています。3 時間ごとにタスクが発火し、最新の Gemini 関連トピックを Web 検索で収集した上で、日本語・英語の両方の記事を自動的に生成・デプロイします。
この仕組みにより、Gemini の急速な進化に追従しながら、人手に頼らずコンテンツを充実させることが可能になっています。
デザインシステム
全姉妹サイトで共通のデザインシステムを使用しています。CSS 変数によるダーク/ライトモード切替、DM Mono + Noto Sans JP + DM Sans のフォント構成、@media (hover: hover) によるPC限定ホバーアニメーションなどが共通仕様です。
各サイトの個性はアクセントカラーで表現しています。Gemini Lab のアクセントカラーは #5B9BF4（ブルー）で、Google Gemini のブランドカラーに寄せています。
まとめ
Gemini Lab の技術スタックは、コンテンツの質と更新頻度の両立を目指して設計されています。Next.js + Cloudflare Workers による高速配信、MDX によるリッチなコンテンツ管理、そして自動更新システムによる継続的なコンテンツ供給が三本柱です。
このアーキテクチャに関する詳細な技術記事も今後公開予定です。質問やフィードバックがあれば、ぜひお気軽にお寄せください。