Next.js App Router vs Pages Router Complete Guide 2026

नमस्ते दोस्तों! 🙏
स्वागत है The Easy Master पर!

क्या तुमने कभी सोचा है – Next.js App Router ने क्या बदल दिया? Next.js 13 के बाद से Pages Router और App Router – दो अलग-अलग तरीके हैं routes बनाने के.

App Router ने React Server Components (RSC) को default बना दिया है – यही सबसे बड़ा change है !

Next.js App Router vs Pages Router Hindi में समझना बहुत जरूरी है क्योंकि:

2026 में App Router default recommendation है
Better performance – Server Components se JS bundle छोटा होता है
Nested layouts – Persistent layouts आसान
Streaming – Data slow हो तो भी page show होता है
Interview mein pakka App Router questions puche jayenge

Aaj kya seekhoge?

Topic	Kya Seekhega?
App Router Kya Hai?	Introduction aur history
Folder Structure	`app/` vs `pages/`
Special Files	`page.tsx`, `layout.tsx`, `loading.tsx`
Server vs Client Components	`'use client'` directive
Data Fetching	`getServerSideProps` vs `async fetch()`
Metadata	`next/head` vs `export const metadata`
Migration Guide	Step-by-step kaise migrate karein

Kya tumhe pata hai?
App Router और Pages Router ek saath chal sakte हैं! तुम page-by-page migrate कर सकते हो .

तो चलिए शुरू करते हैं – Next.js App Router vs Pages Router Hindi सीखने का सफर! 🚀

1. Next.js Routing – Introduction

Next.js file-based routing use करता है – files and folders automatically routes बन जाते हैं.

Pages Router (Old Way – 2016 से):

Code

pages/
├── index.js         → /
├── about.js         → /about
├── blog/
│   ├── index.js     → /blog
│   └── [slug].js    → /blog/:slug
└── api/
    └── users.js     → /api/users

App Router (New Way – 2022 से):

Code

app/
├── page.js          → /
├── about/
│   └── page.js      → /about
├── blog/
│   ├── page.js      → /blog
│   └── [slug]/
│       └── page.js  → /blog/:slug
└── api/
    └── users/
        └── route.js → /api/users

Next.js App Router vs Pages Router Hindi में हम सब कुछ detail में समझेंगे।

2. App Router Kya Hai? – Overview

App Router Next.js 13 (2022) में introduce हुआ . यह Pages Router का successor है और React Server Components (RSC) पर based है.

Key Features:

Feature	App Router	Pages Router
Default Rendering	Server Components	Client Components
Nested Layouts	✅ Native	❌ Manual
Loading States	`loading.tsx`	Manual
Error Boundaries	`error.tsx`	Manual
Data Fetching	`async/await` inside components	`getServerSideProps`
Streaming	✅ Built-in	❌ No
Bundle Size	Smaller	Larger

When was App Router introduced?

Next.js 13 (Oct 2022) – App Router introduced (experimental)
Next.js 13.4 (May 2023) – App Router stable
2026 – App Router is now default recommendation

3. Folder Structure – `app/` vs `pages/`

Pages Router Structure:

Code

my-app/
├── pages/
│   ├── _app.js        # Global wrapper
│   ├── _document.js   # HTML document wrapper
│   ├── index.js       # Home page
│   ├── about.js       # /about
│   ├── blog/
│   │   ├── index.js   # /blog
│   │   └── [slug].js  # /blog/:slug
│   └── api/           # API routes
├── components/
├── styles/
└── public/

App Router Structure :

Code

my-app/
├── app/
│   ├── layout.js      # Root layout (replaces _app + _document)
│   ├── page.js        # Home page
│   ├── about/
│   │   └── page.js    # /about
│   ├── blog/
│   │   ├── page.js    # /blog
│   │   ├── loading.js # Loading UI for /blog
│   │   └── [slug]/
│   │       ├── page.js    # /blog/:slug
│   │       └── loading.js # Loading UI for dynamic route
│   ├── dashboard/
│   │   ├── layout.js  # Dashboard-specific layout
│   │   ├── page.js    # /dashboard
│   │   └── settings/
│   │       └── page.js # /dashboard/settings
│   └── api/
│       └── users/
│           └── route.js # /api/users
├── components/
├── styles/
└── public/

Key Differences:

Pages Router	App Router
`pages/index.js`	`app/page.js`
`pages/about.js`	`app/about/page.js`
`pages/blog/[slug].js`	`app/blog/[slug]/page.js`
`_app.js` + `_document.js`	`app/layout.js` (root layout)
API route in `pages/api/`	API route in `app/api/route.js`

4. Special Files – `page`, `layout`, `loading`, `error`

App Router में special files define UI for each route segment.

Special Files Reference:

File	Purpose	Example
`page.js`	Route UI (publicly accessible)	`app/about/page.js` → `/about`
`layout.js`	Shared UI for segment and children	Sidebar, header, footer
`loading.js`	Loading UI (Suspense boundary)	Spinner, skeleton
`error.js`	Error UI (error boundary)	Error message + retry
`not-found.js`	404 UI	Custom 404 page
`route.js`	API route handler	`app/api/users/route.js`

Example: Complete Blog Structure

Code

// app/layout.js (Root Layout)
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>My Site</header>
        <main>{children}</main>
        <footer>© 2026</footer>
      </body>
    </html>
  );
}

// app/blog/layout.js (Blog Layout - nested)
export default function BlogLayout({ children }) {
  return (
    <div>
      <aside>Blog Sidebar</aside>
      {children}
    </div>
  );
}

// app/blog/page.js (Blog listing)
export default async function BlogPage() {
  const posts = await getPosts();
  return (
    <div>
      {posts.map(post => <PostCard key={post.id} post={post} />)}
    </div>
  );
}

// app/blog/loading.js (Loading UI)
export default function Loading() {
  return <div>Loading posts...</div>;
}

// app/blog/error.js (Error UI)
'use client';
export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

5. Server vs Client Components – `'use client'`

यह सबसे important difference है !

Pages Router (All Client Components):

Code

// pages/counter.js
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);  // ✅ Works
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

App Router (Server Components by Default):

Code

// app/counter/page.js
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);  // ❌ ERROR!
  // "useState" cannot be used in Server Components
  return <button>...</button>;
}

Solution: Add `'use client'` directive:

Code

// app/counter/page.js
'use client';  // ✅ Add this at the top!

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Server Components vs Client Components:

Feature	Server Component	Client Component
Directive	Default (no directive needed)	`'use client'` at top
useState, useEffect	❌ Not allowed	✅ Allowed
async/await	✅ Allowed	❌ Not allowed
Browser APIs	❌ Not allowed	✅ Allowed
Event handlers	❌ Not allowed	✅ Allowed
Bundle size	0 KB (server only)	Sent to client

When to use which?:

Code

// ✅ Server Component (default) – for data fetching, static content
export default async function ProductPage() {
  const product = await db.product.findUnique(...);
  return <div>{product.name}</div>;
}

// ✅ Client Component – for interactivity
'use client';
export function AddToCartButton({ productId }) {
  const [isAdded, setIsAdded] = useState(false);
  return <button onClick={() => setIsAdded(true)}>Add to Cart</button>;
}

6. Data Fetching – Old vs New Way

Pages Router (getServerSideProps / getStaticProps):

Code

// pages/blog/[slug].js
export async function getServerSideProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.slug}`);
  const post = await res.json();
  return { props: { post } };
}

export default function BlogPost({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

App Router (async Server Component):

Code

// app/blog/[slug]/page.js
async function getPost(slug) {
  const res = await fetch(`https://api.example.com/posts/${slug}`, {
    next: { revalidate: 3600 }  // ISR: revalidate every hour
  });
  return res.json();
}

export default async function BlogPage({ params }) {
  const post = await getPost(params.slug);
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

Key Differences:

Pages Router	App Router
`getServerSideProps`	`async` component + `fetch`
`getStaticProps`	`fetch` with `next: { revalidate }`
`getStaticPaths`	`generateStaticParams`
Data fetching separate from UI	Data fetching inside component
Props drilling needed	Direct access in component

7. Metadata – `next/head` vs `export metadata`

Pages Router (next/head):

Code

// pages/about.js
import Head from 'next/head';

export default function About() {
  return (
    <>
      <Head>
        <title>About Us - My Site</title>
        <meta name="description" content="Learn about our company" />
      </Head>
      <div>About content</div>
    </>
  );
}

App Router (export metadata):

Code

// app/about/page.js
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'About Us - My Site',
  description: 'Learn about our company',
};

export default function About() {
  return <div>About content</div>;
}

Dynamic Metadata:

Code

// app/blog/[slug]/page.js
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
  };
}

export default async function BlogPage({ params }) {
  const post = await getPost(params.slug);
  return <div>{post.content}</div>;
}

8. Routing Features – Parallel & Intercepting Routes

App Router में advanced routing features हैं जो Pages Router में नहीं हैं .

Parallel Routes (`@folder`):

Code

// app/dashboard/@analytics/page.js
export default function Analytics() {
  return <div>Analytics Dashboard</div>;
}

// app/dashboard/@users/page.js
export default function Users() {
  return <div>Users Management</div>;
}

Intercepting Routes (`(.)folder`):

Code

// app/feed/page.js (feed page)
// app/feed/(.)photo/[id]/page.js (intercepts /photo/:id from feed)
// Modal opens instead of navigation

Route Groups (`(folder)`):

Code

// app/(marketing)/about/page.js → /about (no /marketing in URL)
// app/(shop)/products/page.js → /products (no /shop in URL)

9. Performance Comparison

Metric	Pages Router	App Router
Default Rendering	Client Components	Server Components
JavaScript Bundle	Larger (all components)	Smaller (server components excluded)
Initial Page Load	Good with SSR/SSG	Better with streaming
Data Fetching Waterfalls	Common	Reduced with parallel fetching
Streaming Support	❌ Not native	✅ Native with Suspense
Caching	Manual implementation	Built-in fetch caching

Streaming Example:

Code

// app/blog/page.js
import { Suspense } from 'react';

export default function BlogPage() {
  return (
    <div>
      <h1>My Blog</h1>
      <Suspense fallback={<div>Loading posts...</div>}>
        <PostList />
      </Suspense>
    </div>
  );
}

async function PostList() {
  const posts = await getPosts(); // Takes 2 seconds
  return posts.map(post => <div key={post.id}>{post.title}</div>);
}

Result: Header immediately shows, posts load later!

10. Migration Guide – Pages से App में कैसे Shift करें

Step 1: Update Next.js Version

Code

npm install next@latest react@latest react-dom@latest

Step 2: Create `app` Directory

Code

mkdir app

Step 3: Create Root Layout (`app/layout.js`)

Code

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Step 4: Migrate Pages One by One

Both routers can coexist! Migrate incrementally.

Code

// Step 4a: Move page to app directory
// pages/about.js → app/about/page.js

// Step 4b: Convert data fetching
// Before (pages/about.js)
export async function getServerSideProps() {
  const data = await fetchData();
  return { props: { data } };
}

// After (app/about/page.js)
export default async function About() {
  const data = await fetchData();
  return <div>{data}</div>;
}

Step 5: Add `'use client'` Where Needed

Code

// Move interactive components to client components
'use client';
import { useState } from 'react';

export function InteractiveButton() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Step 6: Migrate Metadata

Code

// Before (pages/about.js with Head)
import Head from 'next/head';

// After (app/about/page.js)
export const metadata = {
  title: 'About',
  description: 'About our company',
};

Step 7: Migrate API Routes

Code

// Before: pages/api/users.js
export default function handler(req, res) {
  res.json({ users: [] });
}

// After: app/api/users/route.js
export async function GET() {
  return Response.json({ users: [] });
}

11. App Router vs Pages Router – Comparison Table

Feature	Pages Router	App Router
Directory	`pages/`	`app/`
Route file	`about.js`	`about/page.js`
Layouts	Limited (via _app.js)	Native nested layouts
Default components	Client Components	Server Components
Data fetching	`getServerSideProps`, `getStaticProps`	`async` components + `fetch`
Loading states	Manual	`loading.js`
Error handling	Manual	`error.js`
Metadata	`next/head`	`export metadata`
Streaming	❌	✅
Parallel routes	❌	✅
Intercepting routes	❌	✅
Bundle size	Larger	Smaller
Learning curve	Easy	Moderate
When introduced	Next.js 1 (2016)	Next.js 13 (2022)
Recommended for new projects	❌	✅

12. When to Use Which?

✅ Use App Router for:

New projects (2026 में default recommendation)
Complex layouts (dashboards, nested sidebars)
Performance-critical apps (need smaller JS bundle)
SEO-focused projects (better metadata API)
Data-heavy pages (benefit from server components)

✅ Use Pages Router for:

Legacy projects (no time/budget for migration)
Simple static sites (3-5 pages)
Teams not ready for RSC learning curve

Migration Decision Tree:

Code

क्या तुम new project शुरू कर रहे हो?
    │
    ├── YES → ✅ App Router use करो
    │
    └── NO (existing Pages Router project)
            │
            ├── क्या तुम्हारे पास migration budget/time है?
            │       │
            │       ├── YES → Incrementally migrate करो
            │       └── NO → Pages Router continue करो

13. Common Mistakes + Solutions

Mistake 1: Using `useState` in Server Component

Code

// ❌ Error
export default function Page() {
  const [count, setCount] = useState(0); // Error!
}

// ✅ Solution: Add 'use client'
'use client';
export default function Page() {
  const [count, setCount] = useState(0); // Works!
}

Mistake 2: Forgetting `async` keyword

Code

// ❌ Error (await without async)
export default function Page() {
  const data = await getData(); // Error!
}

// ✅ Correct
export default async function Page() {
  const data = await getData(); // Works!
}

Mistake 3: Using `next/router` in App Router

Code

// ❌ Error
import { useRouter } from 'next/router';

// ✅ Use from 'next/navigation'
import { useRouter } from 'next/navigation';

Mistake 4: Not adding Root Layout

Code

// ❌ Error: No root layout found
// ✅ Solution: Create app/layout.js
export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

14. Quick Cheat Sheet

App Router Special Files:

File	Purpose
`page.js`	Route UI
`layout.js`	Shared UI for segment
`loading.js`	Loading UI (Suspense)
`error.js`	Error UI (boundary)
`not-found.js`	404 UI
`route.js`	API route

Quick Commands:

Code

# Create new Next.js project with App Router (default)
npx create-next-app@latest my-app

# Create with Pages Router
npx create-next-app@latest my-app --use-pages-router

Migration Checklist:

Update to Next.js 13.4+
Create app directory
Create root layout.js
Migrate _app.js and _document.js to layout
Migrate pages one by one
Add 'use client' for interactive components
Replace getServerSideProps with async components
Replace next/head with export metadata
Migrate API routes to route.js
Delete migrated pages from pages/

15. FAQ

Q1: Next.js App Router vs Pages Router Hindi में सबसे important difference kya hai?
Server Components – App Router में components server par render होते हैं by default, Pages Router में client par. इससे JS bundle छोटा होता है और performance better होती है.

Q2: Kya App Router Pages Router को replace कर देगा?
Haan, long term में. Next.js official recommendation है – new projects में App Router use करो. Pages Router को support मिलता रहेगा.

Q3: Kya dono routers ek saath use kar sakte hain?
Haan! Next.js allows both pages/ and app/ directories to coexist . तुम page-by-page migrate कर सकते हो.

Q4: App Router में getServerSideProps ka alternative kya hai?
async Server Component – directly fetch inside component:

Code

export default async function Page() {
  const data = await fetchData();
  return <div>{data}</div>;
}

Q5: App Router में SEO kaise handle karein?
export const metadata use करो – better than next/head.

Q6: App Router performance kyun better hai?
Server Components default हैं – client-side JavaScript bundle smaller. Streaming support से initial load faster.

Q7: 'use client' kab use karein?
Jab tumhe interactivity चाहिए – useState, useEffect, event handlers, browser APIs.

Q8: App Router में API routes kaise banayein?
app/api/route.js file banाओ:

Code

export async function GET() {
  return Response.json({ data: 'Hello' });
}

Q9: Migration में सबसे पहले क्या करना चाहिए?
Root layout (app/layout.js) बनाओ – यह _app.js और _document.js को replace करता है.

Q10: 2026 में कौन सा router use karein?
App Router – यह future है और Next.js का default recommendation है .

16. Conclusion

बहुत बढ़िया दोस्तों! आज हमने Next.js App Router vs Pages Router Hindi को पूरी detail में समझा.

Quick Recap:

Aspect	Pages Router	App Router
Directory	`pages/`	`app/`
Default	Client Components	Server Components
Data Fetching	`getServerSideProps`	`async` components
Layouts	Manual	Native nested
Performance	Good	Better
Recommendation	Legacy projects	New projects (2026)

Mera personal experience:

App Router pehle complex lagta hai – Server Components, 'use client', नया folder structure – thoda time lagta hai adjust होने में.

Tum bhi ye steps follow karo:

✅ App Router concepts समझो
✅ नया project create-next-app से बनाओ (default App Router)
✅ page.js और layout.js समझो
✅ Server vs Client components समझो
✅ धीरे-धीरे old projects migrate करो

अब तुम्हारी बारी है!

नीचे comment में बताओ:

क्या तुमने App Router try किया है?
तुम्हें कौन सा feature सबसे useful लगा?
अगला topic क्या चाहिए? (Next.js 15 Features? Server Actions? Middleware?)

The Easy Master पर बने रहो। Happy Coding with Next.js! 🚀⚛️

Resources

Additional Resources

Post Views: 419

1. Next.js App Router – Pages Router से क्या बदला? Complete Guide 2026

Table of Contents

1. Next.js Routing – Introduction

Pages Router (Old Way – 2016 से):

App Router (New Way – 2022 से):

2. App Router Kya Hai? – Overview

Key Features:

When was App Router introduced?

3. Folder Structure – app/ vs pages/

Pages Router Structure:

App Router Structure:

Key Differences:

4. Special Files – page, layout, loading, error

Special Files Reference:

Example: Complete Blog Structure

5. Server vs Client Components – 'use client'

Pages Router (All Client Components):

App Router (Server Components by Default):

Solution: Add 'use client' directive:

Server Components vs Client Components:

When to use which?:

6. Data Fetching – Old vs New Way

Pages Router (getServerSideProps / getStaticProps):

App Router (async Server Component):

Key Differences:

7. Metadata – next/head vs export metadata

Pages Router (next/head):

App Router (export metadata):

Dynamic Metadata:

8. Routing Features – Parallel & Intercepting Routes

Parallel Routes (@folder):

Intercepting Routes ((.)folder):

Route Groups ((folder)):

9. Performance Comparison

Streaming Example:

10. Migration Guide – Pages से App में कैसे Shift करें

Step 1: Update Next.js Version

Step 2: Create app Directory

Step 3: Create Root Layout (app/layout.js)

Step 4: Migrate Pages One by One

Step 5: Add 'use client' Where Needed

Step 6: Migrate Metadata

Step 7: Migrate API Routes

11. App Router vs Pages Router – Comparison Table

12. When to Use Which?

✅ Use App Router for:

✅ Use Pages Router for:

Migration Decision Tree:

13. Common Mistakes + Solutions

Mistake 1: Using useState in Server Component

Mistake 2: Forgetting async keyword

Mistake 3: Using next/router in App Router

Mistake 4: Not adding Root Layout

14. Quick Cheat Sheet

App Router Special Files:

Quick Commands:

Migration Checklist:

15. FAQ

16. Conclusion

Resources

Additional Resources

Related posts

10. Next.js Performance – Bundle Size काम करें and Caching Master करें

Master ES6: A Complete Feature Guide with Examples

4. Next.js Data Fetching – Server Actions and API Routes 2026

Leave a Reply Cancel reply

3. Folder Structure – `app/` vs `pages/`

App Router Structure :

4. Special Files – `page`, `layout`, `loading`, `error`

5. Server vs Client Components – `'use client'`

Solution: Add `'use client'` directive:

7. Metadata – `next/head` vs `export metadata`

Parallel Routes (`@folder`):

Intercepting Routes (`(.)folder`):

Route Groups (`(folder)`):

Step 2: Create `app` Directory

Step 3: Create Root Layout (`app/layout.js`)

Step 5: Add `'use client'` Where Needed

Mistake 1: Using `useState` in Server Component

Mistake 2: Forgetting `async` keyword

Mistake 3: Using `next/router` in App Router