⭐ Next.js Beginner Series – Part 1

Next.js basically React का supercharged version है. सोचो React एक गाड़ी है, और Next.js उसका turbo engine + GPS + सारी automatic सुविधाएँ.

🍵 Next.js kya hota hai?

Next.js ek React framework है:

• Pages banana आसान

• Routing automatic

• Server-side rendering ready-made

• API endpoints built-in

• Performance top class

• SEO ka baap

Isko Vercel ne banaya, jo usko hosting bhi देता है — toh पूरा एक ecosystem ready मिलता है.

🔥 Why Next.js? (Beginners Samjho)

React se bina Next.js ke:

• Routing manually setup करनी पड़ती

• SSR (server-side rendering) कठिन

• SEO कमजोर

• File-based structure नहीं

Next.js में:

• pages/ बनाओ → Route auto

• app/ folder → modern architecture

• API banao → बस /app/api/xyz/route.js

• UI fast, smooth, Google-friendly

मतलब: React + Boost Mode = Next.js

📦 Installation — Next.js ka घर बनाना

Terminal खोलो aur type:

npx create-next-app my-blog

cd my-blog

npm run dev

बस, आपका Next.js app तैयार!
Open browser → http://localhost:3000

📁 Folder Structure — Ghar ki निकलने वाली गलियाँ

my-blog/

 ├─ app/              (new style routing, recommended)

 │   ├─ page.js       (home page)

 │   ├─ layout.js     (common layout)

 │   └─ api/          (backend routes)

 ├─ public/           (images, static files)

 ├─ package.json

 └─ next.config.js

ये app router Next.js 13+ की नई दुनिया है — powerful और clean.

🧭 Routing — Page बनाओ, Route पाओ

Next.js में route banana ऐसा simple है जैसे paratha पर butter।

app/about/page.js बनाओ:

export default function About() {

  return <h1>About Page</h1>;

}

Automatically route:
👉 http://localhost:3000/about

कोई config नहीं, कोई tension नहीं.

🎨 UI Banana — Components React वाले hi use होते

components/Button.js

export default function Button({ label }) {

  return <button>{label}</button>;

}

Use in page.js:

import Button from "../components/Button";

export default function Home() {

  return <Button label="Click Me" />;

}

🍔 API Routes — Bina backend server ke backend

Next.js में backend banana child's play है.

app/api/hello/route.js:

Hit in browser:
👉 http://localhost:3000/api/hello

लो जी, backend भी तैयार!

🚀 Rendering Modes — SSR, CSR, SSG, ISR

यहाँ Next.js चमक जाता है…

SSR (Server-side Rendering)
Page server पर बनेगा → SEO king

SSG (Static Site Generation)
Build time पर generate → Fast

ISR (Incremental Static Regeneration)
Auto-updates without rebuild

CSR (Client-side Rendering)
React जैसा behavior

Beginners के लिए बस इतना समझो:
Next.js आपके लिए best rendering choose कर देता है.

🖼️ Image Optimization — Free ka magic

Next.js की <Image> tag image को compress, resize, optimize सब free में कर देता है.

import Image from "next/image";

<Image src="/logo.png" width={200} height={200} alt="Logo" />

🎯 Deployment — बस "vercel" बोलो और App दुनिया में

Terminal:

npm i -g vercel

vercel