🚀 Next.js Notes (Simple Format)

📌 1. Server & Client Components

🔹 Default Behavior

Next.js me:
- page.js / layout.js → Server Component by default
Matlab:
- Code server pe run hota hai
- Browser ko optimized HTML milta hai

🖥️ 2. Server Component kya hota hai?

👉 Server pe run hota hai

✅ Use kab kare?

Database se data fetch
API call
Secret key use karna (safe)
Performance improve karna

🔹 Example

plaintext

// Server Component
export default async function Page() {
  const data = await fetch("api/data")
  return <div>{data.title}</div>
}

💻 3. Client Component kya hota hai?

👉 Browser pe run hota hai

✅ Use kab kare?

Button click (onClick)
Form handling
useState, useEffect
localStorage, window

🔹 Kaise banaye?

👉 Top me likho:

plaintext

"use client"

🔹 Example

plaintext

"use client"
import { useState } from "react"

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  )
}

🔥 4. Server vs Client (Quick Difference)

FeatureServer ComponentClient ComponentRun kaha hotaServerBrowseruseState❌✅useEffect❌✅API fetch✅❌ (prefer server)SecurityHighLow

🔄 5. Server → Client Data Passing

👉 Props se data bhej sakte ho

plaintext

// Server Component
import LikeButton from "./LikeButton"

export default async function Page() {
  const post = { likes: 10 }
  return <LikeButton likes={post.likes} />
}

plaintext

// Client Component
"use client"

export default function LikeButton({ likes }) {
  return <button>{likes} Likes</button>
}

⚡ 6. "use client" Important Rule

👉 Agar file me "use client" likh diya:

Us file ke saare child components bhi client ban jate hain

📌 Isliye:

Sirf interactive component me use karo
Pure app me mat lagao (performance down hoga)

🧩 7. Mixing Server + Client (Best Practice)

plaintext

// Server Component
import Search from "./Search" // client
import Logo from "./Logo"     // server

export default function Layout() {
  return (
    <>
      <Logo />
      <Search />
    </>
  )
}

👉 Yeh best pattern hai

👉 Static = server

👉 Interactive = client

🔁 8. Hydration kya hota hai?

👉 Simple:

Server → HTML bhejta ha
Client → usko interactive banata hai

📌 Example:

Pehle button dikhega
Baad me click kaam karega

📦 9. Package Manager (npm use karo)

🔹 Project create

plaintext

npx create-next-app@latest my-app
cd my-app
npm run dev

🔹 Package install

plaintext

npm install axios
npm install react-icons

🔹 Server-only package (optional)

plaintext

npm install server-only

👉 Use when:

API keys hide karni ho

🔐 10. Important Security Rule

👉 .env variables:

NEXT_PUBLIC_ → client me visible
normal variable → server only

plaintext

API_KEY=secret   ❌ client me nahi jayega
NEXT_PUBLIC_URL=abc   ✅ client me jayega

🧠 11. Easy Summary (Interview Ready)

Next.js me 2 type components:
- Server (default)
- Client ("use client")
Server:
- fast + secure
Client:
- interactive UI
Best practice:
- Mixing both

🔥 Short Revision (1 min)

👉 Server = data + fast

👉 Client = UI + click

👉 "use client" = browser code

👉 Props = data pass

👉 npm = package manager