Skip to content
FrontendNextjs

3. Next.js Routing – Layouts, Dynamic Routes and Nested Routes 2026

May 2, 2026 13 min read
3. Next.js Routing – Layouts, Dynamic Routes and Nested Routes 2026

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

क्या तुमने कभी सोचा है – Next.js में routing kaise kaam karta hai? Pages Router vs App Router – दोनों में अंतर क्या है?

Next.js routing file-based है – folders और files automatically routes बन जाते हैं. App Router में page.js, layout.js, loading.js जैसे special files हैं.

Next.js routing layouts dynamic routes nested routes Hindi में समझना बहुत जरूरी है क्योंकि:

  • File-based routing – simple और intuitive
  • Nested layouts – persistent UI (header, sidebar) आसान
  • Dynamic routes – [slug] se dynamic pages
  • Loading states – loading.js se automatic Suspense
  • Error handling – error.js se error boundaries

Aaj kya seekhoge?

TopicKya Seekhega?
App Router Routingapp/ directory structure
Pages vs RoutesFile to URL mapping
Layoutslayout.js – persistent UI
Nested LayoutsRoute groups, multiple layouts
Dynamic Routes[slug], [...catchAll]
Loading UIloading.js (Suspense)
Error UIerror.js (Error Boundaries)
Not Foundnot-found.js

Kya tumhe pata hai?
App Router में page.js ही एकमात्र publicly accessible file है – बाकी सब components private होते हैं!

तो चलिए शुरू करते हैं – Next.js routing layouts dynamic routes nested routes Hindi सीखने का सफर! 🚀

1. Next.js Routing – Introduction

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

Pages Router (Old – Next.js 12 and below):

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

App Router (New – Next.js 13+):

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

Next.js routing layouts dynamic routes nested routes Hindi में हम App Router focus करेंगे.

2. App Router Basics – app/ Directory

Special Files in App Router:

FilePurposeExample URL
page.jsRoute UI (publicly accessible)/, /about
layout.jsShared UI for segment and childrenHeader, footer, sidebar
loading.jsLoading UI (Suspense)Spinner, skeleton
error.jsError UI (Error Boundary)Error message + retry
not-found.js404 UICustom 404 page
route.jsAPI route handler/api/users

Basic Example:

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

// app/page.js (Home Page)
export default function HomePage() {
  return <h1>Welcome to My Site!</h1>;
}

// app/about/page.js (About Page)
export default function AboutPage() {
  return <h1>About Us</h1>;
}

3. Pages to Routes – File to URL Mapping

Basic Route Mapping:

File PathURL
app/page.js/
app/about/page.js/about
app/blog/page.js/blog
app/blog/first-post/page.js/blog/first-post

Index Routes:

Code
// app/blog/page.js → /blog
export default function BlogIndex() {
  return <h1>All Blog Posts</h1>;
}

Nested Routes:

Code
// app/blog/first-post/page.js → /blog/first-post
export default function FirstPost() {
  return <h1>First Post</h1>;
}

// app/blog/second-post/page.js → /blog/second-post
export default function SecondPost() {
  return <h1>Second Post</h1>;
}

4. Layouts – layout.js (Persistent UI)

Layouts shared UI components हैं जो navigation पर re-render नहीं होते.

Basic Layout:

Code
// app/blog/layout.js
export default function BlogLayout({ children }) {
  return (
    <div className="blog-container">
      <aside className="blog-sidebar">
        <h2>Blog Menu</h2>
        <nav>
          <a href="/blog">All Posts</a>
          <a href="/blog/categories">Categories</a>
        </nav>
      </aside>
      <main className="blog-content">
        {children}
      </main>
    </div>
  );
}

Root Layout (Required):

Code
// app/layout.js – Root Layout (must have html and body)
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <title>My App</title>
        <meta name="description" content="My Next.js App" />
      </head>
      <body>
        <header>Global Header</header>
        {children}
        <footer>Global Footer</footer>
      </body>
    </html>
  );
}

Layout Hierarchy:

Code
app/
├── layout.js (Root Layout)
│   ├── page.js (Home – uses root layout)
│   └── blog/
│       ├── layout.js (Blog Layout – nested)
│       │   ├── page.js (Blog index – uses blog layout)
│       │   └── [slug]/
│       │       └── page.js (Post page – uses blog layout)

5. Nested Layouts – Layouts ke Andar Layouts

Example: E-commerce Site Structure

Code
// app/layout.js (Root Layout)
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <GlobalNavbar />
        {children}
        <GlobalFooter />
      </body>
    </html>
  );
}

// app/shop/layout.js (Shop Layout)
export default function ShopLayout({ children }) {
  return (
    <div className="shop-container">
      <aside className="shop-sidebar">
        <h3>Categories</h3>
        <ul>
          <li>Electronics</li>
          <li>Clothing</li>
          <li>Books</li>
        </ul>
      </aside>
      <main>{children}</main>
    </div>
  );
}

// app/shop/page.js → /shop
export default function ShopPage() {
  return <h1>Shop Home</h1>;
}

// app/shop/electronics/page.js → /shop/electronics
export default function ElectronicsPage() {
  return <h1>Electronics</h1>;
}

Layout Nesting Visual:

Layout Nesting Visual

6. Dynamic Routes – [slug] and [...catchAll]

Basic Dynamic Route:

Code
// app/blog/[slug]/page.js
export default async function BlogPost({ params }) {
  const { slug } = params;
  const post = await getPost(slug);
  
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

// Generate static paths (for static export)
export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map(post => ({ slug: post.slug }));
}

Multiple Dynamic Segments:

Code
// app/blog/[category]/[slug]/page.js
export default async function BlogPost({ params }) {
  const { category, slug } = params;
  const post = await getPost(category, slug);
  
  return (
    <article>
      <h1>{post.title}</h1>
      <p>Category: {category}</p>
      <p>{post.content}</p>
    </article>
  );
}

Catch-all Routes ([...slug]):

Code
// app/docs/[...slug]/page.js
// Matches: /docs/a, /docs/a/b, /docs/a/b/c
export default async function DocsPage({ params }) {
  const { slug } = params; // slug = ['a'] or ['a', 'b'] or ['a', 'b', 'c']
  
  return (
    <div>
      <h1>Documentation</h1>
      <p>Path: {slug.join(' / ')}</p>
    </div>
  );
}

Optional Catch-all Routes ([[...slug]]):

Code
// app/docs/[[...slug]]/page.js
// Matches: /docs (slug = undefined), /docs/a (slug = ['a']), /docs/a/b (slug = ['a', 'b'])
export default async function DocsPage({ params }) {
  const { slug = [] } = params;
  
  if (slug.length === 0) {
    return <h1>Docs Home</h1>;
  }
  
  return <h1>Docs: {slug.join(' / ')}</h1>;
}

7. Loading UI – loading.js (Suspense)

loading.js automatic Suspense boundary बनाता है – page load होने तक loading UI दिखाता है.

Basic Loading:

Code
// app/blog/loading.js
export default function BlogLoading() {
  return (
    <div className="loading-container">
      <div className="spinner"></div>
      <p>Loading posts...</p>
    </div>
  );
}

Skeleton Loading:

Code
// app/blog/loading.js
export default function BlogLoading() {
  return (
    <div className="skeleton-container">
      {[1, 2, 3, 4, 5].map(i => (
        <div key={i} className="skeleton-card">
          <div className="skeleton-image"></div>
          <div className="skeleton-title"></div>
          <div className="skeleton-text"></div>
        </div>
      ))}
    </div>
  );
}

CSS for Skeleton:

Code
/* app/globals.css */
.skeleton-card {
  background: #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

.skeleton-title {
  height: 20px;
  background: #ccc;
  margin: 10px 0;
  border-radius: 4px;
}

.skeleton-text {
  height: 60px;
  background: #ccc;
  border-radius: 4px;
}

8. Error UI – error.js (Error Boundaries)

error.js automatic Error Boundary बनाता है – error होने पर UI दिखाता है.

Basic Error:

Code
// app/blog/error.js
'use client'; // error.js must be client component

export default function BlogError({ error, reset }) {
  return (
    <div className="error-container">
      <h2>Something went wrong!</h2>
      <p>{error.message}</p>
      <button onClick={() => reset()}>Try again</button>
    </div>
  );
}

Segment-specific Error:

Code
// app/blog/[slug]/error.js (only for dynamic blog posts)
'use client';

export default function PostError({ error, reset }) {
  return (
    <div>
      <h2>Failed to load this post</h2>
      <p>{error.message}</p>
      <button onClick={reset}>Retry</button>
    </div>
  );
}

Global Error (root):

JavaScript
// app/global-error.js (wraps entire app)
'use client';

export default function GlobalError({ error, reset }) {
  return (
    <html>
      <body>
        <h2>Critical Error!</h2>
        <button onClick={reset}>Reload</button>
      </body>
    </html>
  );
}

9. Not Found – not-found.js (404 Page)

not-found.js custom 404 page के लिए.

Basic 404:

Code
// app/not-found.js
export default function NotFound() {
  return (
    <div className="not-found">
      <h1>404</h1>
      <h2>Page Not Found</h2>
      <p>The page you are looking for does not exist.</p>
      <a href="/">Go Home</a>
    </div>
  );
}

Dynamic 404:

Code
// app/blog/[slug]/page.js
import { notFound } from 'next/navigation';

export default async function BlogPost({ params }) {
  const post = await getPost(params.slug);
  
  if (!post) {
    notFound(); // Renders app/blog/[slug]/not-found.js
  }
  
  return <div>{post.content}</div>;
}

// app/blog/[slug]/not-found.js
export default function PostNotFound() {
  return (
    <div>
      <h2>Post not found</h2>
      <p>This blog post doesn't exist.</p>
      <a href="/blog">View all posts</a>
    </div>
  );
}

10. Route Groups – (folder) (URL me nahi aayega)

Route groups URL में include नहीं होते – organization के लिए.

Example:

Code
app/
├── (marketing)/
│   ├── layout.js     (Marketing layout)
│   ├── page.js       → / (Home)
│   └── about/
│       └── page.js   → /about
├── (shop)/
│   ├── layout.js     (Shop layout)
│   ├── products/
│   │   └── page.js   → /products
│   └── cart/
│       └── page.js   → /cart
└── (admin)/
    ├── layout.js     (Admin layout)
    └── dashboard/
        └── page.js   → /dashboard

Route Group Layout:

Code
// app/(marketing)/layout.js
export default function MarketingLayout({ children }) {
  return (
    <div>
      <MarketingHeader />
      {children}
      <MarketingFooter />
    </div>
  );
}

11. Private Folders – _folder (Ignore)

Private folders underscore (_) से start होते हैं – Next.js इन्हें ignore करता है.

Example:

Code
app/
├── _components/      # Private – ignores routing
│   ├── Header.jsx
│   └── Footer.jsx
├── _lib/             # Private – ignores routing
│   └── db.js
├── _utils/           # Private – ignores routing
│   └── helpers.js
└── about/
    └── page.js       # /about – works normally

Importing from Private Folders:

Code
// app/about/page.js
import Header from '../_components/Header';
import { getData } from '../_lib/db';

export default function AboutPage() {
  const data = getData();
  return (
    <div>
      <Header />
      <h1>About</h1>
    </div>
  );
}

12. Parallel Routes – @folder (Advanced)

Parallel routes एक ही layout में multiple pages render करने देते हैं.

Example:

Code
app/
├── dashboard/
│   ├── @analytics/
│   │   └── page.js
│   ├── @users/
│   │   └── page.js
│   └── layout.js
JavaScript
// app/dashboard/layout.js
export default function DashboardLayout({ analytics, users }) {
  return (
    <div>
      <aside>{analytics}</aside>
      <main>{users}</main>
    </div>
  );
}

13. Intercepting Routes – (.)folder (Advanced)

Intercepting routes current page के context में दूसरे page को show करते हैं (modal).

Convention:

ConventionMatches
(.)Same level
(..)One level up
(..)(..)Two levels up
(...)Root

Example (Modal on Feed):

text

Code
app/
├── feed/
│   └── page.js
├── photo/
│   └── [id]/
│       └── page.js
└── feed/
    └── (.)photo/
        └── [id]/
            └── page.js (Modal)

14. Quick Cheat Sheet

Special Files:

FilePurposeClient Component?
page.jsRoute UIOptional
layout.jsShared UIOptional
loading.jsLoading UIAuto
error.jsError UI✅ Required
not-found.js404 UIOptional
route.jsAPI route❌ No

Route Types:

PatternURL Example
page.js/
about/page.js/about
blog/[slug]/page.js/blog/hello-world
docs/[...slug]/page.js/docs/a/b/c
docs/[[...slug]]/page.js/docs or /docs/a/b
(group)/page.js/ (group hidden)

Quick Commands:

Bash
# Create new Next.js app
npx create-next-app@latest my-app

# Run dev server
npm run dev

# Build for production
npm run build

15. FAQ

Q1: Next.js routing layouts dynamic routes nested routes Hindi में सबसे important kya hai?
page.js – यही वह file है जो publicly accessible route बनाती है. बाकी सब components private होते हैं.

Q2: layout.js vs page.js – kya antar hai?
layout.js – shared UI (persistent across navigation), page.js – unique content for specific route.

Q3: Nested layouts kaise kaam karte hain?
Layouts nested होते हैं – root layout children के अंदर child layout, फिर page.js.

Q4: Dynamic routes [slug] कैसे बनाएं?
app/blog/[slug]/page.js – params.slug से value मिलती है.

Q5: loading.js kya karta hai?
Automatic Suspense boundary – page load होने तक loading UI दिखाता है.

Q6: error.js client component kyun hona chahiye?
Error boundaries client-side hydration के बाद ही काम करते हैं.

Q7: Route groups (folder) kyun use karein?
URL में extra segment add किए बिना routes को organize करने के लिए.

Q8: Private folders _folder kya karte hain?
Next.js इन्हें routing से ignore करता है – components, utils, lib रखने के लिए.

Q9: not-found.js कब render होता है?
notFound() function call करने पर या unmatched route पर.

Q10: Catch-all vs Optional catch-all – kya antar hai?
[...slug] – at least one segment required, [[...slug]] – zero segments allowed (root also matches).

16. Conclusion

बहुत बढ़िया दोस्तों! आज हमने Next.js routing layouts dynamic routes nested routes Hindi को पूरी detail में समझा.

Quick Recap:

ConceptKey Takeaway
page.jsPublicly accessible route
layout.jsPersistent UI (doesn’t re-render)
loading.jsAutomatic Suspense
error.jsError boundary (client component)
[slug]Dynamic route parameter
(group)URL में hidden
_folderPrivate (ignored)

Mera personal experience:

App Router ka file-based routing bohot intuitive है. Pehle Pages Router use करता था, अब App Router में nested layouts और loading states built-in हैं – development bohot fast हो गया है.

Tum bhi ye steps follow karo:

  1. ✅ app/ directory बनाओ
  2. ✅ page.js से basic routes बनाओ
  3. ✅ layout.js से shared UI add करो
  4. ✅ [slug] से dynamic routes बनाओ
  5. ✅ loading.js और error.js add करो

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

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

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

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

Resources

Additional Resources

Post Views: 428
TheEasyMaster

Author at The Easy Master.

Related posts

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

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

नमस्ते दोस्तों! 🙏स्वागत है The Easy Master पर! क्या तुमने कभी सोचा है – Next.js App Router ने क्या बदल दिया? Next.js 13 के…

May 1, 2026 14 min read
6. Next.js Partial Prerendering – Static and Dynamic Content साथ में
Backend

6. Next.js Partial Prerendering – Static and Dynamic Content साथ में

नमस्ते दोस्तों! 🙏स्वागत है The Easy Master पर! क्या तुमने कभी सोचा है – Static site fast तो होती है, लेकिन personalized content possible…

May 5, 2026 12 min read
8. Next.js SEO – Metadata API and Image Optimization समझे 2026
Frontend

8. Next.js SEO – Metadata API and Image Optimization समझे 2026

नमस्ते दोस्तों! 🙏स्वागत है The Easy Master पर! क्या तुमने कभी सोचा है – Next.js app को Google में top rank पर कैसे लाएं?…

May 6, 2026 17 min read

Leave a Reply

Your email address will not be published. Required fields are marked *