Dev Elite Academy
仕様書一覧に戻る

フロントエンドアーキテクチャ

セクション 1 / 3

1. アーキテクチャ概要

1.1 設計方針

App Router採用

  • Next.js 15のApp Routerを採用
  • Server ComponentsとClient Componentsの適切な分離
  • ストリーミングとサスペンスの活用

コンポーネント設計

  • Atomic Designの原則に基づく階層構造
  • 再利用可能なコンポーネントライブラリの構築
  • propsの型安全性の徹底

1.2 ディレクトリ構造

src/
├── app/                    # Next.js App Router
│   ├── (auth)/            # 認証関連ルート
│   ├── modules/           # 学習モジュール
│   ├── specifications/    # 仕様書・設計書
│   └── api/              # APIルート
├── components/            # 共通コンポーネント
│   ├── ui/               # UIプリミティブ
│   ├── learning/         # 学習機能
│   └── documents/        # ドキュメント表示
├── data/                 # 静的データ
├── hooks/                # カスタムフック
├── lib/                  # ユーティリティ
└── types/                # 型定義
1 / 3