DOC/ 更新日 2026-09-19

アーキテクチャ

プロジェクト構造、データフロー、サイトの作り方。

このサイトは Next.js 16（App Router）のアプリケーションで、ビルド時に静的 HTML として生成され、YuTheme デザイン言語でスタイリングされ、 Vercel にデプロイされます。サーバーランタイムはありません。

Next.js 16（App Router、静的生成）
React 19
TypeScript
pnpm（パッケージマネージャー、packageManager でバージョン固定）
Turborepo モノレポ（apps/、packages/）
7つの言語のための next-intl、localePrefix: as-needed
YuTheme トークンと編集上の慣習（design.md 参照）
Lucide アイコン（lucide-react 経由）
フォント: Geist Variable と Geist Mono Variable（next/font/local）

クライアント側 JavaScript は少量のハイドレーションのみです。ヘッダーのモバイルメニュー、スクロールスパイ、アンカーのスムーズスクロール、スクロールリビールです。

apps/web/src/
  app/
    [locale]/
      layout.tsx            ドキュメントシェル、フォント、メタデータ、JSON-LD
      page.tsx              ワンページホーム
      docs/page.tsx         ドキュメントのインデックス
      docs/[slug]/page.tsx  個別のドキュメントページ
      globals.css           YuTheme トークン、基本スタイル、モーション
    sitemap.ts              全言語のサイトマップ
    robots.ts
  components/
    Analytics.tsx           Umami フック、env で有効化、デフォルト無効
    Footer.tsx
    Header.tsx              固定ヘッダー、スクロールスパイ、モバイルシート
    Icon.tsx                Lucide アイコンマップ、型付き名前
    Reveal.tsx              IntersectionObserver によるスクロールリビール
    sections/
      Hero.tsx              見出し + ターミナルカード
      About.tsx
      WhatIDo.tsx           カードグリッド
      HowIWork.tsx
      WhereILive.tsx
      SelectedWork.tsx      公開された仕事のリスト
  data/site.ts             サイト定数: URL、ナビゲーション
  i18n/                    routing、request 設定、型付きナビゲーション
  lib/docs.ts              ドキュメントページのマークダウンパイプライン
packages/
  content/                 docs/ ソース、言語ごとに EN フォールバックで読む
  i18n/                    言語リスト + 7つのロケールのメッセージ
  ui/styles/               正準 YuTheme CSS、トークンリファレンス

言語: en（デフォルト、プレフィックスなし）、pt、es、fr、de、ja、zh-CN。
UI のコピーは packages/i18n/messages/<locale>.json にあります。
ドキュメントは packages/content/docs/<locale>/ にあります。言語にファイルがない場合は英語版がフォールバックとして提供されます。
ルートは静的です。ビルド時に generateStaticParams で全言語・全ドキュメントスラッグがプリレンダリングされます。

ドキュメントページは packages/content/src/index.ts 経由で packages/content/docs/ フォルダを読みます。

各ドキュメントはフロントマター付きの Markdown ファイル: title、 description、order、updated;
アプリは remark/rehype（GFM、見出しスラッグ、自動リンク、サニタイズ済み HTML）で /docs/<slug> にレンダリングし、インデックスは /docs;
@ellamizuki/content はアプリバンドルの外に保たれ（serverExternalPackages）、本番でもファイルシステムの読み取りが機能します。

コレクションがリポジトリでバージョン管理されている同じフォルダを読むため、ドキュメントは同期を保ちます。ひとつの真実の源、二つのビュー（サイトページとリポジトリファイル）です。

ビルド時: Next.js が全言語の /、/docs、/docs/* をプリレンダリングします。
コンテンツはプリレンダリング済み。サーバーも、API も、ランタイムデータもありません。
Analytics（Umami）はビルド時に NEXT_PUBLIC_UMAMI_SRC と NEXT_PUBLIC_UMAMI_WEBSITE_ID の両方が設定されている場合のみ注入されます。

各ページに単一の h1 を持つセマンティック HTML。
セクション見出しは順序どおり（h2 の次は h3）、レベルを飛ばさない。
外部リンクは rel="noopener noreferrer" 付きで新しいタブで開く。
next-intl がレンダリングするリンクには、プレフィックス済みの href を渡さない。言語プレフィックスは常にナビゲーションヘルパーが追加する。
Reduced motion はどこでも尊重される。シャイマー、リビール、トランジションは prefers-reduced-motion の背後にゲートされる。

スタック

構造

ローカライゼーション

ドキュメントパイプライン

データフロー

慣習