App Directory

Overview

The 'app' directory is the core of the Next.js App Router (introduced in Next 13). It enforces a structured convention using specific filenames (page, layout, loading, error) to handle routing, UI rendering, and states.

Syntax

bash

src/
└── app/
    ├── layout.tsx       # Root layout, wraps all pages (Required)
    ├── page.tsx         # The UI for the "/" route
    ├── loading.tsx      # Loading UI (Suspense fallback)
    ├── error.tsx        # Error Boundary UI
    ├── not-found.tsx    # 404 UI
    ├── global.css       # Global styles
    └── dashboard/
        └── page.tsx     # Maps to "/dashboard"

Common Pitfalls

Files named anything other than page.tsx/route.ts inside the app folder will NOT be publicly routable. This is a feature, not a bug.
Don't mix 'pages/' directory and 'app/' directory for the same route. They will conflict.

Real-World Example

Co-locating project files within the app directory:

example

bash

// In the App Router, folders define routes, but ONLY 'page.tsx' is publicly accessible.
// This allows you to co-locate components and utilities safely.

app/
├── dashboard/
│   ├── page.tsx          // Route: /dashboard
│   ├── utils.ts          // Safe: Not routable
│   ├── Button.tsx        // Safe: Not routable
│   └── (components)/     // Safe: Grouped components
│       └── Card.tsx

Take Next.js Quiz