Next.jsのディレクトリ構成｜初心者向けに全体像を解説

Next.jsのディレクトリ構成とは？app/pages時代を迷わず理解するための全体像

Next.jsのディレクトリ構成カテゴリでは、Next.jsプロジェクトのフォルダ設計を基礎から体系的に解説します。 Next.jsは「ディレクトリがルーティングやレンダリング方式に直結する」特徴があり、React単体のプロジェクトよりもフォルダ構成の理解が重要です。 特にApp Router（appディレクトリ）とPages Router（pagesディレクトリ）の違いを押さえることで、SSR・SSG・ISR・CSRの設計がスムーズになります。

本カテゴリでは、app/pages/publicといった基本フォルダだけでなく、components・lib・hooks・utils・typesなどの実務的な整理方法も扱います。 Next.jsの開発では「UI」「データ取得」「ドメインロジック」「API層」「型定義」を分離しておくと保守性と開発効率が大きく向上します。 そのため、初心者向けのシンプルな構成から、チーム開発・大規模開発・モノレポ（Turborepo）まで段階的に理解できるように構成しています。

appディレクトリとpagesディレクトリの役割を整理しよう

Next.js 13以降ではApp Routerが新しい標準となり、appディレクトリを中心にlayout.tsxやpage.tsx、loading.tsx、error.tsxなどを配置して画面を構成します。 一方で、既存資産や移行途中のプロジェクトではpagesディレクトリを使うケースもあり、両者の共存や移行の考え方を理解しておくことがSEO対策や開発効率の面でも有利です。 本カテゴリでは、どちらを採用すべきか、どう整理すべきかを具体例ベースで解説します。

実務で役立つフォルダ分割とベストプラクティス

Next.jsのディレクトリ設計では、componentsを粒度ごとに分ける設計、libでビジネスロジックをまとめる設計、servicesでAPI通信を整理する設計など、現場で使われるパターンが複数存在します。 また、PrismaやDrizzleなどのORMを導入する場合は、DB接続・スキーマ・サーバー専用処理の配置場所が重要になります。 フォルダ設計を最初に整えておくことで、パフォーマンス最適化やキャッシュ戦略、SEO強化、認証実装なども進めやすくなります。

このカテゴリで学べること

• Next.jsの基本ディレクトリ構成（app/pages/public）の理解
• components/lib/hooks/utils/typesの整理と責務分離
• App Router時代の高度な構成（Route Groupやレイアウト分割）
• 大規模開発・チーム開発で崩れないフォルダ設計
• モノレポ運用（Turborepo）を見据えた設計ポイント

ディレクトリ構成を理解するとNext.js開発が一気に楽になる

Next.jsは「どこに何を置くか」がそのまま機能設計につながるフレームワークです。 ディレクトリ構成の基本を押さえることで、ルーティング、レンダリング、キャッシュ、SEO、認証、API設計が整理され、後からの変更コストを大幅に減らせます。 初心者の方はまず本カテゴリで「迷わないフォルダ設計」を身につけ、次のステップ（Layout設計、Server Components設計、パフォーマンス最適化）へ進むのがおすすめです。