開発・技術

Next.js（App Router）で個人開発を爆速化する｜ディレクトリ構成と共通コンポーネントのテンプレート

2026年1月9日

Next.jsのApp Routerが登場してからしばらく経ちますが、未だに「ディレクトリ構成の最適化」で消耗していませんか？

Atomic DesignやClean Architectureは、大規模チームでは有用ですが、私たち個人開発者にとっては「ファイルを分割しすぎて開発スピードを鈍化する足枷」になりかねません。

今回は、私が複数の個人SaaSを開発する中で辿り着いた、「メンテナンス性と開発スピードのバランスの良いおすすめディレクトリ構成」を紹介します。

1. 個人開発における「おすすめのディレクトリ構成」

結論から言います。個人開発では「appを中心に、共通部品はcomponents、横断ロジックはlibに寄せる」構成がおすすめです。

「features（機能単位）」でガチガチに固める構成もありますが、個人開発では“探す場所が増える”だけで速度が落ちがちです。迷わないことを最優先にして、置き場所を3つに絞るのがコツです。

src/
├── app/                  // ルーティング、page.tsx、layout.tsx、Server Actionsの起点
│   ├── layout.tsx
│   ├── page.tsx
│   ├── dashboard/
│   │   ├── layout.tsx
│   │   └── page.tsx
│   └── settings/
│       └── page.tsx
├── components/
│   ├── ui/               // ボタンなど最小単位（shadcn/uiなど）
│   └── layouts/          // ヘッダー、サイドバーなど
├── lib/                  // 認証、DB接続、外部SDK、共通ユーティリティ
│   ├── auth.ts           // 認証（例：NextAuth/Clerk/Supabase等）
│   ├── db.ts             // Prisma等のDBクライアント
│   └── utils.ts          // 汎用関数
└── types/                // 全体共通の型（必要なら）

ポイント：迷ったら「app / components / lib」だけ見ればいい

個人開発で一番コストが高いのは、「どこに書くべきか」「どこにあるか」を考える時間です。

  • app：画面（page/layout）と、その画面で必要な処理の起点
  • components：UI部品（再利用するものだけ）
  • lib：認証・DB・外部API・共通処理（横断関心）

この3つに寄せるだけで、「この機能どこだっけ？」が激減します。

2. UIライブラリは「shadcn/ui」一択

個人開発でCSSを一から書くのは、趣味でない限り避けましょう。現在はTailwind CSS × shadcn/uiの組み合わせがデファクトスタンダードです。

MUIやChakra UIと違い、コンポーネントのコードが自分のプロジェクト内にコピーされるため、後から「ここのデザインだけちょっと変えたい」というカスタマイズが自由自在だからです。

まとめ：構造化は「未来の自分」への投資

個人開発は勢いが大事ですが、無秩序にコードを書くと、1ヶ月後の自分が解読不能に陥ります。

app / components / libの3点セットに寄せるだけでも、「書くスピードは爆速のまま、読みやすさも維持する」ことが可能です。

まずは形から入るのも立派な戦略です。この構成で、あなたの素晴らしいアイデアを形にしてください。

-開発・技術