Next.js 16 brings a more refined, modern, and consistent project structure, especially with features like Cache Components, proxy.ts, improved App Router, and the new create-next-app template.

If you’re starting a new project—or upgrading from Next.js 13–15—this guide explains exactly what each folder does and how everything fits together.

🗂️ Top-Level Project Structure

A typical Next.js 16 project looks like this:

my-app/
├── app/
├── public/
├── components/
├── lib/
├── hooks/
├── styles/
├── proxy.ts
├── postcss.config.mjs
├── tailwind.config.ts
├── next.config.ts
├── package.json
└── tsconfig.json

Below, we break down each part.

🔷 1. app/ — The Core of Your Application

Next.js 16 uses the App Router by default. Every route, page, layout, and server action lives here.

Example structure:

app/
├── layout.tsx
├── page.tsx
├── global.css
├── (marketing)/
│   ├── layout.tsx
│   └── page.tsx
├── dashboard/
│   ├── page.tsx
│   ├── loading.tsx
│   ├── error.tsx
│   └── default.tsx
└── api/
    └── hello/
        └── route.ts

Important files inside app/:

App Router Highlights (Next.js 16)

• Server Components by default
• Client Components via "use client"
• Cache Components (new)
• Improved routing and prefetching
• Support for Partial Pre-rendering (PPR)

🔶 2. proxy.ts — Replaces middleware.ts

Starting in Next.js 16:

✔ middleware.ts → Deprecated ✔ proxy.ts → New standard

my-app/
└── proxy.ts

This file handles:

• Redirects
• Rewrites
• Authentication guards
• Request interception

And now always runs in Node.js runtime, providing a clearer network boundary.

Example:

export default function proxy(request) {
  return Response.redirect(new URL('/home', request.url));
}

🖼️ 3. public/ — Static Assets

Anything in public/ is served directly at the root URL:

public/logo.png  →  /logo.png
public/fonts/... →  /fonts/...

Used for:

• Images
• Fonts
• robots.txt
• sitemap.xml

🧩 4. components/ — Reusable UI & Client Components

This folder is for UI building blocks:

components/
├── button.tsx
├── navbar.tsx
└── card.tsx

Recommended use:

• Client Components
• Presentational UI
• Shared form elements
• Layout pieces

🧠 5. lib/ — Server Utilities & Core Logic

Common for:

• Database helpers
• APIs
• Server actions
• Caching logic
• Utility functions

lib/
├── db.ts
├── auth.ts
└── cache.ts

This keeps your app folder clean and focused on routing.

🔁 6. hooks/ — Custom React Hooks

Client or shared hooks go here:

hooks/
├── useScroll.ts
├── useAuth.ts
└── useTheme.ts

🎨 7. styles/ — Global & Shared Styles

Includes:

• global CSS files
• Tailwind layers
• custom theme files

styles/
└── globals.css

If you’re using Tailwind, some projects prefer:

app/global.css

⚙️ 8. Config Files (Modern Setup)

next.config.ts

Main Next.js config.

Enables features like:

export default {
  cacheComponents: true,      // NEW
  reactCompiler: false,       // stable but off by default
  turbopack: {},              // stable bundler
};

tsconfig.json

TypeScript config + path aliases:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

postcss.config.mjs

Used when Tailwind or PostCSS plugins are enabled.

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

tailwind.config.ts

If using Tailwind CSS:

content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"]

🗄️ 9. Optional But Common Folders

✔ types/

Store TypeScript interfaces and types.

✔ data/

Local JSON or markdown files.

✔ context/

React context providers.

✔ models/

For ORM-based apps (Prisma, Drizzle).

✔ scripts/

Automation tasks / migrations.

🎯 Full Example: Next.js 16 Best Practice Folder Structure

project-root/
│
├── app/                                  # ⚡ App Router (SSR + RSC + Server Actions)
│   ├── (marketing)/                      # Route Group: public pages
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── about/
│   │       └── page.tsx
│   │
│   ├── (dashboard)/                      # Route Group: authenticated area
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   ├── settings/
│   │   │   └── page.tsx
│   │   └── analytics/
│   │       └── page.tsx
│   │
│   ├── api/                              # 🛰️ Route Handlers (Server Functions)
│   │   ├── auth/
│   │   │   └── route.ts
│   │   └── posts/
│   │       └── route.ts
│   │
│   ├── layout.tsx                        # Root Layout (global UI)
│   ├── page.tsx                          # Landing page
│   ├── error.tsx                         # Error Boundary
│   ├── loading.tsx                       # App-wide loading UI
│   ├── not-found.tsx                     # 404 Page
│   └── global-error.tsx                  # v16+ Global error handling
│
├── components/                           # 🧩 Reusable UI Components
│   ├── ui/                               # shadcn/ui or atomic components
│   ├── layout/                           # Navbar, footer, sidebar...
│   ├── charts/                           # Custom chart components
│   └── forms/                            # Input, button, form components
│
├── lib/                                  # ⚙️ Business Logic / Utilities
│   ├── auth.ts                           # Authentication logic
│   ├── db.ts                             # DB client (Prisma / Drizzle)
│   ├── api-client.ts                     # Fetch wrappers (client-side)
│   ├── validations.ts                    # Zod schemas
│   └── utils.ts                          # General utilities
│
├── hooks/                                # 🎣 Custom React hooks (client)
│   ├── useAuth.ts
│   ├── useDebounce.ts
│   └── useMediaQuery.ts
│
├── store/                                # 🧠 Global state (Zustand / Jotai / Redux)
│   └── userStore.ts
│
├── styles/                               # 🎨 Global styling
│   ├── globals.css
│   └── variables.css
│
├── public/                               # 📁 Static files
│   ├── favicon.ico
│   └── images/
│       └── logo.png
│
├── tests/                                # 🧪 Unit, Integration, E2E tests
│   ├── components/
│   ├── pages/
│   └── api/
│
├── scripts/                              # 🛠️ DevOps / maintenance scripts
│   ├── seed.ts
│   └── deploy.sh
│
├── proxy.ts                              # 🌐 v16 Proxy Middleware + Auth
├── next.config.ts                        # Next.js configuration (Edge, caching, adapters)
├── tailwind.config.ts                    # Tailwind CSS settings
├── tsconfig.json                         # TypeScript configuration
├── .env.local                            # Local environment variables
└── package.json                          # Dependencies & scripts

This is the clean, modern structure recommended for Next.js 16.