Next.js App Routerのフォルダ構造: ベストプラクティスとエンタープライズアーキテクチャ (2026)

app/
└── dashboard/
    ├── page.tsx
    ├── layout.tsx
    ├── DashboardGraph.tsx       # Colocated component
    ├── dashboard.module.css     # Colocated styling
    └── dashboard.test.tsx       # Colocated unit test

app/
├── (marketing)/
│   ├── layout.tsx       # Marketing layout (Navigation bar + Footer)
│   ├── page.tsx         # Served at: /
│   └── pricing/
│       └── page.tsx     # Served at: /pricing
└── (dashboard)/
    ├── layout.tsx       # Dashboard layout (Sidebar + Account switcher)
    ├── settings/
    │   └── page.tsx     # Served at: /settings
    └── analytics/
        └── page.tsx     # Served at: /analytics

app/
├── (dashboard)/
│   └── analytics/
│       ├── _components/   # OPTED OUT of routing (/analytics/_components is 404)
│       │   ├── Chart.tsx
│       │   └── MetricCard.tsx
│       ├── _lib/
│       │   └── calculations.ts
│       └── page.tsx       # Served at: /analytics

src/
├── app/          # Layer 1: Next.js routing, layouts, and page composition
├── features/     # Layer 2: Business actions and user workflows
├── entities/     # Layer 3: Domain data models and business entities
└── shared/       # Layer 4: Foundation (UI primitives, API clients, helpers)

// src/app/(dashboard)/analytics/page.tsx
import { Suspense } from 'react';
import { AnalyticsMetrics } from '@/features/usage-metrics';
import { getCurrentUser } from '@/entities/user';
import { SkeletonLoader } from '@/shared/ui';

export default async function AnalyticsPage() {
  const user = await getCurrentUser();

  return (
    <main className="container mx-auto p-6 space-y-6">
      <header>
        <h1 className="text-3xl font-bold tracking-tight">Analytics</h1>
        <p className="text-muted-foreground">Welcome back, {user.name}</p>
      </header>

      <Suspense fallback={<SkeletonLoader count={4} />}>
        <AnalyticsMetrics organizationId={user.orgId} />
      </Suspense>
    </main>
  );
}

src/features/auth-flow/
├── ui/                 # React client/server components
│   ├── LoginForm.tsx
│   └── SocialButtons.tsx
├── api/                # Colocated Server Actions
│   └── authenticate.ts
├── model/              # Local state, validation schemas
│   └── schema.ts
└── index.ts            # STRICT Public API export

// src/features/auth-flow/index.ts
export { LoginForm } from './ui/LoginForm';
export { authenticateWithOAuth } from './api/authenticate';

app/(dashboard)/dashboard/page.tsx   # [Server Component] Fetches data
├── DashboardSummary.tsx             # [Server Component] Pure HTML rendering
└── _components/
    └── InteractiveFilter.tsx        # ['use client'] ONLY interactive button/state

my-app/
├── public/
│   └── static/
├── src/
│   ├── app/
│   │   ├── (auth)/
│   │   │   ├── login/page.tsx
│   │   │   ├── signup/page.tsx
│   │   │   └── layout.tsx
│   │   ├── (dashboard)/
│   │   │   ├── layout.tsx
│   │   │   ├── overview/page.tsx
│   │   │   └── settings/
│   │   │       ├── page.tsx
│   │   │       └── _components/
│   │   ├── api/
│   │   │   └── webhooks/stripe/route.ts
│   │   ├── favicon.ico
│   │   ├── global-error.tsx
│   │   ├── layout.tsx
│   │   └── not-found.tsx
│   │
│   ├── features/
│   │   ├── auth/
│   │   │   ├── ui/
│   │   │   ├── api/
│   │   │   └── index.ts
│   │   └── billing/
│   │       ├── ui/
│   │       ├── api/
│   │       └── index.ts
│   │
│   ├── entities/
│   │   ├── user/
│   │   │   ├── ui/UserAvatar.tsx
│   │   │   ├── model/types.ts
│   │   │   └── index.ts
│   │   └── organization/
│   │
│   └── shared/
│       ├── ui/             # Reusable design system components
│       ├── lib/            # Utilities (cn, formatters)
│       └── hooks/          # Domain-agnostic React hooks
│
├── middleware.ts           # Edge routing & auth guards
├── next.config.mjs
└── tsconfig.json