Server Actions ও Mutations

export default function Page() {
  async function createPost(formData: FormData) {
    "use server";

    const title = formData.get("title");
    await db.post.create({ data: { title } });
  }

  return (
    <form action={createPost}>
      <input name="title" placeholder="Post title" required />
      <button type="submit">Publish</button>
    </form>
  );
}

"use server";

export async function createPost(formData: FormData) {
  const title = formData.get("title");
  await db.post.create({ data: { title } });
}

"use client";

import { useActionState } from "react";
import { createPost } from "@/app/actions";

const initialState = { message: "" };

export function Form() {
  const [state, formAction, pending] = useActionState(
    createPost,
    initialState
  );

  return (
    <form action={formAction}>
      <input type="text" name="title" required />
      {state?.message && <p aria-live="polite">{state.message}</p>}
      <button disabled={pending}>
        {pending ? "Creating..." : "Create Post"}
      </button>
    </form>
  );
}

"use server";

import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";

export async function createPost(formData: FormData) {
  const post = await db.post.create({
    data: { title: formData.get("title") },
  });

  revalidatePath("/posts"); // cache refresh
  redirect(`/posts/${post.id}`);
}