前回の記事の続きです。
Vibe Codingに最適なNext.jsとClaude Codeに向けて、Next.jsのディレクトリ構成を整理します。
現代のdApps開発では、Web3特有の複雑さに加えて、フロントエンド開発の高速化が求められています。特にハッカソンやMVP開発では、限られた時間内で動作するプロダクトを構築する必要があり、効率的なディレクトリ構成が成功の鍵となります。
Claude Codeのようなコード生成AIツールを活用することで、開発速度を大幅に向上させることができますが、そのためには明確で一貫性のあるプロジェクト構造が不可欠です。本記事では、Next.js App RouterとClaude Codeの組み合わせに最適化されたディレクトリ構成を提案します。
対象読者
本記事は以下の方々を想定しています。
- Web3のエンジニア・PM: dApps開発の効率化や技術選定に悩んでいる方
- ハッカソンのビルダー: 短期間で機能するdAppsを構築したい方
- Vibe Codingの最適な構成について模索している方: AIツールを活用した開発フローを構築したい方
特に、複雑な機能よりもスピードを重視し、ブロックチェーンネイティブな機能に集中したい開発者に有用な内容となっています。
また、FBやTipsをシェアは大歓迎なので、ぜひお気軽にコメントしてください。「ここはバッドプラクティスでは？」などのツッコミもぜひ。
ディレクトリ構成の方針
本構成は以下の方針に基づいて設計されています。
MVP開発に特化した構成
ハッカソンや短期開発に最適化し、必要最小限の機能から始めて段階的に拡張できる構造を採用しています。過度に複雑な抽象化は避け、直感的でわかりやすい配置を重視しました。
機能別パッケージ化
features/ディレクトリで機能ごとに独立したモジュールを管理し、コンポーネント・フック・型定義を一箇所に集約します。これにより、機能の追加・削除が容易になります。
チーム開発への配慮
GitHub、VSCode、ESLint、Prettierなどの設定を統一し、チーム全体で一貫した開発環境を構築できます。ドキュメントとコードの整合性も重視しています。このような静的ツールの導入はAIに対しても有効かつ必須です。
Claude Code連携の最適化
AIツールが理解しやすい明確な命名規則と、機能別のモジュール化を徹底しています。.claude/や docs/ でコンテキスト管理を行い、開発効率を最大化します。
Web3開発の特殊性への対応
ブロックチェーン情報やスマートコントラクトの管理、ウォレット連携など、Web3特有の要素を考慮した構成となっています。
ディレクトリ構成
ルートレベル（プロジェクト全体）
my-dapp-project/
├── .claude/ # 🤖 Claude AI 設定
├── .github/ # 🔧 GitHub 設定
├── .vscode/ # 📝 VSCode チーム設定
├── docs/ # 📚 設計資料・仕様書
├── public/ # 🌐 静的ファイル
├── src/ # 💻 アプリケーションソース
├── .editorconfig # 📐 エディタ統一設定
├── .env # 🔐 環境変数
├── .env.local # 🔐 ローカル環境変数
├── .env.example # 📋 環境変数テンプレート
├── .eslintrc.json # 🔍 ESLint 設定
├── .gitignore # 📝 Git 除外設定
├── .prettierrc # 💅 Prettier 設定
├── .prettierignore # 📝 Prettier 除外設定
├── CLAUDE.md # 🤖 Claude Code プロジェクト情報
├── LICENSE # ⚖️ ライセンス
├── README.md # 📖 プロジェクト概要
├── components.json # 🎨 shadcn/ui 設定
├── next.config.ts # ⚡ Next.js 設定
├── package.json # 📦 パッケージ情報
├── pnpm-lock.yaml # 🔒 pnpm ロックファイル
├── postcss.config.js # 🎨 PostCSS 設定
├── tailwind.config.ts # 🎨 Tailwind CSS 設定
├── tsconfig.json # 📘 TypeScript 設定
└── vercel.json # 🚀 Vercel デプロイ設定
src/ 配下（Next.js）
src/
├── app/ # 🚀 Next.js App Router - ルーティングのみ
│ ├── mint/
│ │ └── tag:qiita.com,2005:PublicArticle/2054058/page.tsx # 動的ルート
│ ├── about/page.tsx
│ ├── profile/page.tsx
│ ├── globals.css # グローバルスタイル
│ ├── layout.tsx # ルートレイアウト
│ └── page.tsx # トップページ
│
├── components/ # 🧩 再利用可能コンポーネント
│ ├── layout/ # レイアウト専用
│ │ └──Header.tsx
│ │ └──HeaderNavigation.tsx
│ │ └──Footer.tsx
│ ├── providers/ # Context Provider
│ ├── shared/ # 機能横断共有
│ └── ui/ # shadcn/ui + v0コンポーネント
│
├── constants/ # 📋 定数・設定
│ ├── chain-info/ # ブロックチェーン情報
│ ├── contracts/ # スマートコントラクト情報
│ ├── meta/ # SEO・SNS メタ情報
│ │ ├── brand-copy.ts
│ │ ├── site-metadata.ts
│ │ ├── social-links.ts
│ │ ├── external-links.ts
│ │ └── team-members.ts
│ ├── common/ # 汎用定数
│ │ └── social-platforms.ts
│ └── index.ts # 統一エクスポート
│
├── features/ # 🎛️ 機能別モジュール
│ └── mint/ # Mint機能パッケージ
│ ├── components/ # 機能専用コンポーネント
│ ├── hooks/ # 機能専用フック
│ ├── types/ # 機能専用型定義
│ └── utils/ # 機能専用ユーティリティ
│
├── hooks/ # 🎣 グローバル共有フック
├── lib/ # 📚 ライブラリ・ユーティリティ
├── stores/ # 🏪 Zustand状態管理
├── types/ # 📝 グローバル型定義
└── utils/ # 🔧 グローバルユーティリティ
Claude関連（.claude, CLAUDE.md, docs, .github, .vscode の設定など）
my-dapp-project/
├── .claude/ # 🤖 Claude AI 設定
│ ├── project-context.md # プロジェクト全体コンテキスト
│ ├── prompts/ # カスタムプロンプト集
│ │ ├── code-review.md # コードレビュー用
│ │ ├── feature-dev.md # 機能開発用
│ │ ├── debugging.md # デバッグ用
│ │ ├── web3-patterns.md # Web3 開発パターン
│ │ └── ui-component.md # UI コンポーネント生成用
│ ├── contexts/ # 機能別詳細コンテキスト
│ │ ├── web3-wallet.md # Wallet 機能詳細
│ │ ├── nft-minting.md # NFT Mint 機能詳細
│ │ ├── state-management.md # Zustand 状態管理
│ │ ├── ui-design-system.md # デザインシステム
│ │ └── directory-structure.md # ディレクトリ構成
│ ├── workflows/ # 開発ワークフロー
│ │ ├── mvp-development.md # MVP 開発手順
│ │ ├── feature-addition.md # 新機能追加手順
│ │ ├── testing-strategy.md # テスト戦略
│ │ └── deployment.md # デプロイ手順
│ └── README.md # Claude 設定ガイド
├── .vscode/ # 📝 VSCode チーム設定
│ ├── settings.json # エディタ設定
│ ├── extensions.json # 推奨拡張機能
│ ├── launch.json # デバッグ設定
│ └── tasks.json # タスク設定
├── docs/ # 📚 設計資料・仕様書
│ ├── ui-design-guide.md # UI デザインガイド
│ ├── state-management-guide.md # 状態管理ガイド
│ ├── directory-structure-guide.md # ディレクトリ構成ガイド
│ ├── api-specification.md # API 仕様書
│ └── deployment-guide.md # デプロイガイド
├── CLAUDE.md # 🤖 Claude Code プロジェクト情報
Views: 0
