Folder structure in next js

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.

❮ Create Project

Next ❯

Read other awesome articles in Medium.com or in akcoding’s posts.

Join us on YouTube Channel

OR Scan the QR Code to Directly open the Channel 👉