Next.js App Routerのディレクトリ構造と設計指針｜日笠泰彰の実践的ガイド

📅 2026-03-18👤 著者: 日笠泰彰

はじめに：なぜApp Routerの構造設計が重要なのか

Next.js13以降、AppRouterの導入によってフロントエンド開発の自由度は飛躍的に向上しました。しかし、自由度が高い反面、明確な設計指針を持たずに開発を進めると、コンポーネントの責務が曖昧になり、スパゲッティコード化するリスクも孕んでいます。

本記事では、ITエンジニアとして活動する日笠泰彰が、自身のサービス開発プロジェクトで実際に採用している設計思想をもとに、 Next.js App Routerの構造設計について解説します。

1. 理想的なディレクトリ構成のサンプル

ルーティングとロジックを分離するため、以下のような構造を推奨しています。

app/
├── (auth)/           # Route Groups: 認証関連
│   ├── login/
│   └── register/
├── (main)/           # Route Groups: メイン機能
│   ├── dashboard/
│   └── posts/
├── api/              # Route Handlers
├── components/       # 共通UIコンポーネント
│   ├── elements/     # ボタン等の最小単位
│   └── layouts/      # ヘッダー・フッター等
└── lib/              # 共通ユーティリティ・ライブラリ設定

2. Server Components と Client Components の使い分け

AppRouter最大の鍵は「デフォルトがServer Componentsである」点です。日笠の設計では、以下の基準でコンポーネントを分類しています。

Server Components: データフェッチ、バックエンドリソースへの直接アクセス、セキュリティ情報の保持。
Client Components: useStateやuseEffectなどのフックが必要なインタラクション、ブラウザAPIの利用、イベントリスナー。

「可能な限りServerComponentsで構築し、末端のインタラクティブな部分だけをClientComponentsに切り出す」ことで、クライアント側に送るJavaScriptの量を最小限に抑えています。

3. コロケーション（Colocation）の推奨

AppRouterでは、ページ固有のコンポーネントやCSSをそのルートディレクトリ内に配置する「コロケーション」が可能です。これにより、関連するファイルが物理的に近くに配置され、コードの可読性とメンテナンス性が劇的に向上します。

4. 開発におけるパフォーマンス最適化

Next.jsのCaching機構（RequestMemoization,DataCache等）を正しく理解することで、不要なAPIコールを防ぎ、爆速なユーザー体験を提供できます。特に、fetch関数の自動的なメモ化は、同じデータを複数のコンポーネントで必要とする場合に非常に強力な武器となります。

まとめ：継続的な改善が最高のサービスを作る

技術の進化は速いですが、本質的な「責務の分離」や「ユーザー体験の追求」は変わりません。日笠泰彰は、これからも最新のNext.jsの動向を追いながら、より質の高いエンジニアリングを提供し続けます。