🚀 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