🚀 Next.js Mutating Data (Easy Notes)

📌 1. Mutating Data kya hota hai?

👉 Simple:

• Data change karna (CRUD)

  • Create

  • Update

  • Delete

⚡ 2. Server Function kya hota hai?

👉 Server pe run hone wala async function

👉 Isko bolte hain:

• Server Function

• Server Action (form use case me)

📌 Important:

• Always async

• Server pe run hota hai

• Client se call hota hai

🔹 Kaise banaye?

👉 "use server" use karo

plaintext

export async function createPost(formData) {
  "use server"

  const title = formData.get("title")

  // DB save
}

🧠 3. Server Action ka Use (Form me)

plaintext

import { createPost } from "./actions"

export function Form() {
  return (
    <form action={createPost}>
      <input name="title" />
      <button type="submit">Create</button>
    </form>
  )
}

👉 Form submit → direct server call

📌 Automatically POST request hota hai

💻 4. Client Component se call kaise kare?

plaintext

"use client"
import { createPost } from "./actions"

export default function Button() {
  return <button formAction={createPost}>Create</button>
}

🔥 5. Event Handler se call

plaintext

"use client"
import { incrementLike } from "./actions"

export default function LikeButton() {
  return (
    <button onClick={async () => {
      await incrementLike()
    }}>
      Like
    </button>
  )
}

⏳ 6. Loading State (Pending)

plaintext

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

const [state, action, pending] = useActionState(createPost, false)

<button onClick={action}>
  {pending ? "Loading..." : "Submit"}
</button>

👉 pending = loading state

🔄 7. Data Refresh (Important)

👉 Data change ke baad UI update karna

plaintext

import { refresh } from "next/cache"

export async function updatePost() {
  "use server"
  // update DB
  refresh()
}

♻️ 8. Cache Revalidate

plaintext

import { revalidatePath } from "next/cache"

export async function createPost() {
  "use server"

  // DB save
  revalidatePath("/posts")
}

👉 Page fresh data show karega

🔀 9. Redirect after Action

plaintext

import { redirect } from "next/navigation"

export async function createPost() {
  "use server"

  redirect("/posts")
}

👉 Action ke baad page change

🍪 10. Cookies Handle

plaintext

import { cookies } from "next/headers"

export async function example() {
  "use server"

  const cookieStore = cookies()

  cookieStore.set("name", "Anil")
}

👉 Get / Set / Delete cookies

🧠 11. Important Rules (Interview)

• Server Action = "use server"

• Always async

• Form → direct call

• POST request automatically

• Secure (server side)

• After mutation:

  • refresh / revalidate / redirect

🔥 Short Revision (1 min)

👉 Mutate = create/update/delete

👉 Server Action = server function

👉 "use server" = must

👉 form action = auto call

👉 revalidate = refresh data

💥 Super Simple Line

👉 "Next.js me data change karne ke liye Server Actions use karte hain"

🚀 Full Flow समझ लो

1. Form submit

2. Server Action call

3. DB update

4. UI refresh