Dev → Build → Production⚙️Next.js Internal Workflow #3 || Next.js Anatomy || DeathCode - DeathCode

⚙️ Next.js Internals: Dev vs. Build vs. Production 🚀

Next.js sirf ek library nahi, balki ek Full Framework hai. Iska matlab ye khud ka server chalata hai, khud ka build system manage karta hai, aur routing/rendering ko end-to-end handle karta hai. Is lesson mein hum samjhenge ki Next.js piche (internally) kaise kaam karta hai.

🛠️ 1. Project Initialization & System Requirements

Next.js 16 (Latest) use karne ke liye aapke system mein niche di gayi cheezein honi chahiye:

  • Node.js: LTS version (Recommended).
  • Package Manager: npm, yarn, ya pnpm (Speed ke liye pnpm best hai).

🚀 Creating the Project

npx create-next-app@latest nextjs-anatomy

Hum default options ke saath start karenge kyunki abhi humara goal optimisation nahi, balki framework ke structure ko samajhna hai.

🔄 2. Development Mode (npm run dev)

Jab aap next dev chalate hain, toh Next.js ka priority Developer Experience (DX) hota hai na ki performance.

🧠 Internally Kya Hota Hai?

  • Dev Server: Ek local server start hota hai jo files ko watch karta hai.
  • Hot Module Replacement (HMR): Jaise hi aap code save karte hain, sirf wahi part update hota hai bina poora page refresh kiye.
  • Error Overlays: Agar code mein galti hai, toh browser par hi detailed error message dikhta hai.
  • On-Demand Compilation: Next.js saare pages ko ek saath build nahi karta; sirf wahi page compile hota hai jise aap browser mein dekh rahe hain.

🧩 Analogy

Ye ek Workshop Mode jaisa hai. Yahan perfection se zyada iteration aur fast feedback important hai.

⚠️ Warning: Dev mode mein performance production jaisi nahi hoti, isliye speed check hamesha production build mein hi karein.

🏗️ 3. Build Time Magic (npm run build)

Ye sabse important phase hai. next build wo waqt hai jab Next.js apna "dimaag" lagata hai aur decisions leta hai.

🧠 Build Time par Kya Decisions Hote Hain?

  • Code Analysis: Next.js pure code ko scan karta hai.
  • Rendering Strategy: Har route ke liye decide hota hai—kya ye Static (SSG) hai ya Dynamic (SSR)?
  • Optimisation: JavaScript ko minify kiya jata hai, CSS ko bundle kiya jata hai, aur images ko optimise karne ki taiyari hoti hai.
  • Static Generation: Jo pages static hain (jinhe data ke liye request ka wait nahi karna), unka HTML file isi waqt generate ho jata hai.

🧩 Build-Time vs Runtime

  • Build-Time: Decisions lene ka waqt (e.g., exam paper print hona).
  • Runtime: Execution ka waqt (e.g., exam hall mein paper solve karna).

🚀 4. Production Mode (npm run start)

Jab aap next start chalate hain, toh Next.js sirf wahi files serve karta hai jo build folder mein taiyar ho chuki hain.

🧠 Internally Kya Hota Hai?

  • No Hot Reload: Yahan code changes live nahi dikhenge.
  • Serving Assets: Static pages ko turant serve kiya jata hai.
  • Request Handling: SSR pages aur API routes ko har request par execute kiya jata hai.
  • Middleware: Har request par check kiya jata hai ki koi redirect ya auth logic toh nahi chalana.

🧩 Analogy

Ye Factory ka Final Product hai. Ab changes allowed nahi hain, sirf delivery (performance) par focus hai.

🌍 5. The Role of Server vs CDN

Mastering Next.js ke liye server aur CDN ki boundary samajhna zaroori hai:

Component Kya Karta Hai? Kya Nahi Karta?
Server (Node.js) SSR render karna, DB connect karna, Server Actions chalana Button clicks handle karna, browser state manage karna
CDN (Edge) Static assets (images, HTML) ko user ke paas se serve karna Database se direct connect hona, heavy logic execute karna

🧠 Final Mental Model: The 3 Pillars

  • next dev → Sirf developer ke liye (Iteration)
  • next build → Sirf system ke liye (Decisions & Optimisation)
  • next start → Sirf users ke liye (Execution)

🚀 Next Video Teaser

Ab hum Next.js ke Routing ko deep dive karenge.

  • App Router
  • Page Router

Inka asli internal logic kya hai, wo next lesson mein dekhenge.

© 2024 DeathCode. All Rights Reserved.