How Next.js Routing Works 🤯 Segment Based Routing #6 || Next.js Anatomy || DeathCode - DeathCode

🗺️ Next.js Routing Deep Dive: Folder = URL Model

Next.js App Router mein routing sirf files banane ka kaam nahi hai, balki ye aapki application architecture design karne ka tareeka hai. Is lesson mein hum samjhenge ki kaise folder structure aur URL segments aapas mein connect hote hain.

🧠 1. Routing ka Basic Rule: Folder is the Segment

Next.js ka sabse bada rule ye hai: app/ folder ke andar har ek sub‑folder URL ka ek segment ban jata hai.

Basic Flow

app/ → folder_name/ → page.tsx

Rule of Existence

Agar kisi folder mein page.tsx file nahi hai, toh wo route exist nahi karta. Sirf folder hone se URL access nahi hota.

Example

Folder Structure URL Path Status
app/blog/page.tsx /blog ✅ Accessible
app/about/info.tsx /about ❌ 404 (Missing page.tsx)

🔍 2. Segment‑Based Routing (The Tree Structure)

URL ka har part jo / ke beech hota hai, use Segment kehte hain. Next.js is tree structure ko follow karke URL resolve karta hai.

Example URL

/dashboard/settings/profile

Folder Segments

  • dashboard (Segment 1)
  • settings (Segment 2)
  • profile (Segment 3)

Analogy 🧩

Sochiye aap ek almirah ke drawers open kar rahe hain. Ek bade drawer ke andar chota drawer, aur last drawer mein actual cheez (page) milti hai. URL bhi isi tarah segment‑by‑segment resolve hota hai.

🏗️ 3. Nested Routes aur Layout Connection

Routing sirf URL ke liye nahi, balki UI structure ke liye bhi hoti hai.

Jab aap folders ko nest karte hain, Next.js unke layouts ko bhi nest kar deta hai.

Hierarchy Example

Root Layout → Dashboard Layout → Settings Page

Matlab /dashboard/settings par aapko dashboard ka sidebar + settings ka content dono dikhega, kyunki layouts persist rehte hain.

📂 4. Route Groups (folder) — Clean Structure

Kabhi‑kabhi folders sirf code organization ke liye chahiye hote hain, URL mein dikhane ke liye nahi. Iske liye Route Groups use hote hain.

Syntax

Folder ka naam brackets mein rakhein:

(auth)
(marketing)

Behavior

Ye folders URL segment mein count nahi hote.

Example

app/(auth)/login/page.tsx → /login
app/(auth)/register/page.tsx → /register

Use Case

Login aur Signup pages ko ek jagah organize karna, bina URL ko messy banaye.

🛣️ 5. Parallel Routes @folder (Basic Intro)

Parallel routing ek advanced feature hai jo aapko ek hi URL par multiple sections render karne deta hai.

Syntax

@sidebar
@content

Concept

Dashboard page mein sidebar aur main content independent routes ho sakte hain jo ek saath render hon.

Deep dive advanced lesson mein hoga.

⚠️ 6. Common Routing Mistakes

Missing page.tsx

Folder bana dete hain par route entry file nahi hoti → 404 error.

Confusing Groups with URLs

(auth) ka matlab URL mein /auth/login nahi hota. Brackets ka matlab hai ignore this folder for URL.

Layout vs Template Confusion

Layout ko re‑render karana chahna — jabki layout state persist karta hai. Aise case mein template.tsx use karna chahiye.

⚡ 7. URL Resolution Order (How It Works)

Jab user /dashboard/settings request karta hai, Next.js roughly is order mein files resolve karta hai:

  1. Root Layout → app/layout.tsx
  2. Intermediate Layout → app/dashboard/layout.tsx
  3. Specific Loading UI → app/dashboard/settings/loading.tsx
  4. Final Page → app/dashboard/settings/page.tsx

🎯 Final Mental Model Summary

  • Folder = URL Segment → Har folder rasta hai
  • page.tsx = Destination → Iske bina route band hai
  • layout.tsx = Surroundings → Persistent UI
  • (group) = Internal Label → Sirf developer ke liye

🚀 Next Lesson

Dynamic Routes (e.g., /blog/[id]), Catch‑All segments, aur inka SEO par kya asar padta hai?

© 2024 DeathCode. All Rights Reserved.