Stop Confusing App Router Files 🚀 Complete Guide #5 || Next.js Anatomy || DeathCode - DeathCode

📂 Next.js App Router: The File System Architecture

Next.js App Router mein sabse badi confusion ye hoti hai ki "kaunsi file kahan banani hai?" Log aksar bina samjhe page.tsx ya layout.tsx kahin bhi bana dete hain. Is lesson mein hum har file ki Special Power aur uske Use Case ko detail mein samjhenge.

🧠 1. The app/ Directory: Application ka Brain

App Router ka poora system app/ folder ke andar hi revolve karta hai. Iska role sirf routing tak limited nahi hai, balki ye poori application ka control centre hai.

Folder = URL Path

app/ ke andar aap jo bhi folder banate hain, wo URL segment ban jata hai.

Example:

app/dashboard/settings/ → URL: /dashboard/settings

Responsibilities

  • Routing
  • Rendering (Server / Client)
  • Layout management
  • Error handling
  • API routes (Backend)

📄 2. page.tsx: The Route Entry Point

page.tsx ek route ka actual content hota hai. Is file ke bina wo URL exist hi nahi karta.

Role

Ye URL ko represent karti hai.

Default Behavior

Ye Server Component hota hai. Matlab iska HTML server par banta hai aur browser ko bahut kam JavaScript bheji jati hai.

Note

Agar aapko interactivity chahiye (jaise buttons ya state), tabhi aap iske upar 'use client' likhte hain.

🏗️ 3. layout.tsx: Persistent Structure

Jo UI aapko multiple pages par baar-baar dikhana hai (jaise Navbar, Sidebar, Footer), wo layout.tsx mein jata hai.

Power of Persistence

Jab aap ek route se dusre route par jate hain, toh layout re-render nahi hota. Iska matlab state (jaise search bar ka input) maintain rehti hai.

Nested Layouts

Har folder ka apna layout ho sakta hai jo Root Layout ke andar nest ho jata hai.

Default

Server Component.

🔄 4. template.tsx: The Resettable Layout

template.tsx bilkul layout jaisa hi hai, lekin ek bahut bade farq ke saath.

The Difference

Ye har navigation par reset (re‑mount) hota hai.

Use Cases

  • Navigation par animations reset karni ho
  • Page‑specific state persist nahi karni ho
Feature layout.tsx template.tsx
State Persistence Persist karti hai Reset ho jati hai
Re‑rendering Nahi hota Har baar hota hai
Usage Global / Shared UI Animations / Tracking

⏳ 5. loading.tsx: Instant Feedback (Suspense)

Jab kisi page ka data fetch hone mein time lagta hai, toh Next.js automatically loading.tsx ko render kar deta hai.

Suspense Boundary

Ye internally React Suspense ka use karta hai.

Streaming

Content ko chunks mein stream kiya jata hai. Jaise hi data ready hota hai, loading UI replace ho jati hai.

Pro Tip

Skeletons ya spinners use karein taaki user ko "Site slow hai" aisa feel na ho.

⚠️ 6. error.tsx: The Safety Net

Agar rendering ya data fetch karte waqt koi error aa jaye, toh poori app crash hone ke bajaye sirf wahi section crash hota hai jahan error.tsx present hai.

Client Component

Ye hamesha 'use client' hona chahiye kyunki ismein error recovery logic hota hai.

Reset Function

Ismein ek reset() function milta hai jo user ko "Try Again" ka option deta hai bina page refresh kiye.

🔍 7. not-found.tsx: 404 Handling

Jab koi route exist nahi karta ya koi specific resource (jaise invalid product ID) miss ho jata hai, tab ye file trigger hoti hai.

SEO Friendly

Ye proper 404 status code ke saath render hoti hai.

Manual Trigger

Aap code mein notFound() function call karke bhi ise dikha sakte hain.

📡 8. route.ts: The Backend API Endpoint

Next.js mein aapko alag se Express server ki zarurat nahi hoti. route.ts ke zariye aap backend APIs bana sakte hain.

HTTP Methods

  • GET
  • POST
  • PUT
  • DELETE

Runtime

Ye Node.js environment mein chalta hai. Yahan aap database connection aur auth logic likh sakte hain.

📑 9. Metadata API: SEO Power

Next.js 16 mein purana head.tsx remove ho chuka hai. Ab Metadata API use hoti hai.

Static Metadata

export const metadata = {
  title: "Home"
}

Dynamic Metadata

generateMetadata() function se dynamic titles (jaise product name) set kar sakte hain.

⚡ 10. File Execution Order & Hierarchy

Next.js files ko roughly is hierarchy mein execute karta hai:

  1. Root Layout (app/layout.tsx)
  2. Nested Layouts (folder‑specific layouts)
  3. Template (if present)
  4. Error Boundary (error.tsx)
  5. Suspense Boundary (loading.tsx)
  6. Page (page.tsx)

🧠 Server vs Client: Final Clarity Table

File Default Type Environment
page.tsx Server Server
layout.tsx Server Server
loading.tsx Server Server
not-found.tsx Server Server
route.ts Server Server (Node)
error.tsx Client Browser

🎯 Summary

  • page → route ka content dikhata hai
  • layout → structure banata hai
  • loading → waiting state handle karta hai
  • error → app ko crash hone se bachata hai

Inka sahi combination hi ek professional Next.js app banata hai.

🚀 Next Video

Routing Deep Dive — Folder structure se advanced URL patterns (Dynamic, Catch‑all) kaise banayein?

© 2024 DeathCode. All Rights Reserved.