プロジェクト構造
ProductReadyのアーキテクチャを理解する - すべての配置場所とその理由
プロジェクト構造
ProductReadyは明確で論理的な構造に従っています。このガイドは、すべての配置場所とコードを追加する場所を理解するのに役立ちます。
Next.jsは初めて？ この構造は、スケーラビリティのための追加の組織化を伴うNext.js 15+ App Router規約に従っています。
概要
apps/productready/
├── src/ # すべてのアプリケーションコード
│ ├── app/ # Next.jsページとルート
│ ├── components/ # Reactコンポーネント
│ ├── db/ # データベーススキーマとクエリ
│ ├── lib/ # ユーティリティと設定
│ └── server/ # サーバーサイドコード（tRPC）
├── content/ # ドキュメント（MDX）
├── public/ # 静的アセット
├── spec/ # 製品仕様と設計ドキュメント
└── tests/ # テストファイル詳細構造
apps/productready
├─ src
│ ├─ app
│ │ ├─ (home)/
│ │ ├─ dashboard/
│ │ ├─ api/health/route.ts
│ │ ├─ docs/[[...slug]]/page.tsx
│ │ ├─ layout.tsx
│ │ └─ global.css
│ ├─ components
│ │ ├─ ui/ (button.tsx, card.tsx, ...)
│ │ └─ auth/auth-button.tsx
│ ├─ db
│ │ ├─ schema/ (users.ts, tasks.ts, posts.ts)
│ │ ├─ index.ts
│ │ └─ seed.ts
│ ├─ lib
│ │ ├─ trpc/client.ts
│ │ ├─ auth.ts
│ │ └─ demo.ts
│ └─ server
│ ├─ routers/ (tasks.ts, users.ts)
│ ├─ trpc.ts
│ └─ index.ts
├─ content
│ └─ docs
│ ├─ en/ (index.mdx, quick-start.mdx, ...)
│ ├─ zh-CN/ (index.mdx, ...)
│ └─ ja/ (index.mdx, ...)
├─ public/assets/
├─ spec/ (product-design.md, icp-guide.md, ...)
├─ .env.example
├─ package.json
├─ next.config.mjs
└─ drizzle.config.ts主要ディレクトリの説明
src/app/ - Next.jsページ
ここにページとルートが配置されます。Next.jsはファイルベースのルーティングを使用します。
フォルダ構造 = URL構造：
app/(home)/page.tsx→/（ランディングページ）app/dashboard/page.tsx→/dashboardapp/dashboard/tasks/page.tsx→/dashboard/tasksapp/api/health/route.ts→/api/health（APIエンドポイント）
ルートグループ: (home) - 括弧はURLに影響せず、整理のためだけです
特別なファイル：
page.tsx- 実際のページコンポーネントlayout.tsx- 共有レイアウトラッパーloading.tsx- ローディング状態error.tsx- エラーバウンダリroute.ts- APIエンドポイント
追加する場所:
- 新しいページ →
page.tsxを含むフォルダを作成 - 新しいAPI →
route.tsを作成
src/components/ - Reactコンポーネント
再利用可能なUIコンポーネント。
components/
├─ ui/ # 基本UIコンポーネント（ボタン、カードなど）
├─ auth/ # 認証関連コンポーネント
├─ dashboard/ # ダッシュボード固有のコンポーネント
└─ marketing/ # マーケティング/ランディングページコンポーネント命名規約：
PascalCaseでファイルに名前を付ける：TaskCard.tsx- エクスポート名と一致させる：
export function TaskCard() {}
src/db/ - データベース
Drizzle ORMスキーマとクエリ。
db/
├─ schema/
│ ├─ users.ts # ユーザーテーブルスキーマ
│ ├─ tasks.ts # タスクテーブルスキーマ
│ └─ index.ts # すべてのスキーマをエクスポート
├─ index.ts # データベースクライアント
└─ seed.ts # シードデータ新しいテーブルを追加する方法：
schema/に新しいファイルを作成：schema/posts.ts- Drizzleでスキーマを定義
schema/index.tsからエクスポートpnpm db:pushを実行
src/server/ - tRPC API
サーバーサイドのAPIロジック。
server/
├─ routers/
│ ├─ tasks.ts # タスク関連のAPI
│ ├─ users.ts # ユーザー関連のAPI
│ └─ posts.ts # 投稿関連のAPI
├─ trpc.ts # tRPC設定
└─ index.ts # ルート集約新しいAPIを追加する方法：
routers/に新しいファイルを作成- tRPCルーターを定義
index.tsでマージ
src/lib/ - ユーティリティ
共有ユーティリティと設定。
lib/
├─ trpc/client.ts # tRPCクライアント設定
├─ auth.ts # 認証ヘルパー
├─ demo.ts # デモモードユーティリティ
└─ utils.ts # 一般的なユーティリティcontent/ - ドキュメント
Fumadocsドキュメント（MDX）。
content/
└─ docs/
├─ en/ # 英語ドキュメント
├─ zh-CN/ # 中国語ドキュメント
└─ ja/ # 日本語ドキュメント新しいドキュメントページを追加する方法：
content/docs/[locale]/に.mdxファイルを作成- フロントマターを追加（タイトル、説明）
meta.jsonでナビゲーションを更新
public/ - 静的アセット
画像、フォント、その他の静的ファイル。
public/
├─ assets/
│ ├─ icons/
│ └─ screenshots/
└─ favicon.ico使用方法：
<img src="/assets/icons/logo.svg" alt="Logo" />開発ワークフロー
新しい機能を追加
例：タスク管理機能を追加
- データベーススキーマ：
src/db/schema/tasks.ts - APIルーター：
src/server/routers/tasks.ts - ページ：
src/app/dashboard/tasks/page.tsx - コンポーネント：
src/components/tasks/TaskList.tsx
新しいページを追加
src/app/にフォルダを作成page.tsxを追加- 必要に応じて
layout.tsxを追加
新しいAPIを追加
src/server/routers/にルーターを作成src/server/index.tsでマージ- クライアントから
trpc.myRouter.myQuery.useQuery()を使用
ベストプラクティス
ファイル組織
- ✅ 機能でグループ化：関連ファイルを一緒に保管
- ✅ 明確な命名：ファイルの目的がわかるように
- ✅ 浅い階層：深くネストしすぎない
- ❌ グローバル状態を避ける：可能な限りローカルに保つ
コンポーネント
- ✅ 小さく集中：1つのコンポーネント = 1つの責任
- ✅ Props over Context：可能な限りpropsを使用
- ✅ TypeScript：すべてに型付け
- ❌ 大きなコンポーネント：複雑な場合は分割
データベース
- ✅ スキーマファースト：常にスキーマを最初に定義
- ✅ マイグレーション：
pnpm db:pushでスキーマを更新 - ✅ シード：開発用のテストデータ
- ❌ 生のSQL：Drizzleクエリビルダーを使用
次のステップ
プロジェクト構造を理解したので：
ヘルプが必要ですか？
ProductReadyで構築を楽しんでください！ 🚀