The folder structure in a Next.js project depends on whether you use the App Router (introduced in Next.js 13) or the Pages Router (legacy approach). Below is the standard folder structure for both:
1️⃣ App Router (Next.js 13+) – Recommended
Next.js introduced the app directory to enable React Server Components, Server Actions, and Streaming. The structure looks like this:
my-next-app/
│── public/ # Static assets (images, icons, etc.)
│── src/ # Source folder (optional)
│ ├── app/ # App Router (Replaces pages/)
│ │ ├── layout.tsx # Root layout (applies to all pages)
│ │ ├── page.tsx # Default homepage
│ │ ├── about/ # Route: /about
│ │ │ ├── page.tsx
│ │ ├── dashboard/ # Nested routes: /dashboard
│ │ │ ├── page.tsx
│ │ │ ├── settings/
│ │ │ │ ├── page.tsx
│ │ ├── api/ # API routes (e.g., /api/hello)
│ │ │ ├── hello/
│ │ │ │ ├── route.ts
│ ├── components/ # Reusable UI components
│ ├── styles/ # Global CSS or Tailwind config
│ ├── lib/ # Utility functions, API calls
│ ├── hooks/ # Custom hooks
│ ├── context/ # Context providers (optional)
│── .next/ # Build output (auto-generated)
│── node_modules/ # Installed dependencies
│── next.config.js # Next.js config file
│── tailwind.config.js # Tailwind CSS config (if using Tailwind)
│── package.json # Project dependencies & scripts
│── tsconfig.json # TypeScript config (if using TypeScript)
│── .gitignore # Ignore unnecessary files
🔥 Key Features in App Router
- Uses React Server Components (RSC).
- Supports Layouts (
layout.tsx). - New API routes (
app/api/route.ts). - Improved data fetching (Server Actions, Streaming).
2️⃣ Pages Router (Legacy Approach)
Before Next.js 13, all pages were inside the pages/ directory.
my-next-app/
│── public/ # Static assets (images, icons, etc.)
│── pages/ # Page-based routing
│ ├── index.tsx # Homepage (/)
│ ├── about.tsx # About page (/about)
│ ├── dashboard/ # Nested pages
│ │ ├── index.tsx # Dashboard main page
│ │ ├── settings.tsx # Dashboard settings (/dashboard/settings)
│ ├── api/ # API routes (e.g., /api/hello)
│ │ ├── hello.ts
│── components/ # Reusable UI components
│── styles/ # CSS or Tailwind styles
│── utils/ # Helper functions
│── .next/ # Build output (auto-generated)
│── node_modules/ # Installed dependencies
│── next.config.js # Next.js config
│── package.json # Dependencies & scripts
│── tsconfig.json # TypeScript config (if using TypeScript)
│── .gitignore # Ignore unnecessary files
🛑 Key Differences Between App Router & Pages Router
| Feature | App Router (app/) | Pages Router (pages/) |
|---|---|---|
| Server Components | ✅ Yes (default) | ❌ No |
| API Routes | ✅ app/api/route.ts | ✅ pages/api/hello.ts |
| Layouts | ✅ Built-in (layout.tsx) | ❌ Manual _app.tsx |
| Streaming & Suspense | ✅ Yes | ❌ No |
| File-based Routing | ✅ Yes | ✅ Yes |
| Client-side Rendering | ✅ Yes (with "use client") | ✅ Yes |
Which One Should You Use?
- ✅ Use
app/(App Router) for new projects (recommended). - 🔄 Use
pages/(Pages Router) if migrating an old project.
Read other awesome articles in Medium.com or in akcoding’s posts.
OR
Join us on YouTube Channel
OR Scan the QR Code to Directly open the Channel 👉
