Server Actions

// app/actions.ts
"use server";
 
import { revalidatePath } from "next/cache";
 
export async function createPost(formData: FormData) {
  const title = formData.get("title") as string;
 
  await db.post.create({ data: { title } });
  revalidatePath("/posts");
}

// app/posts/new/page.tsx (Server Component)
import { createPost } from "@/app/actions";
 
export default function NewPostPage() {
  return (
    <form action={createPost}>
      <input name="title" required />
      <button type="submit">Create</button>
    </form>
  );
}

// app/actions/todo.ts
"use server";
 
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
import { db } from "@/lib/db";
 
export async function addTodo(formData: FormData) {
  const text = formData.get("text") as string;
 
  if (!text || text.trim().length === 0) {
    return { error: "Text is required" };
  }
 
  await db.todo.create({ data: { text: text.trim(), done: false } });
  revalidatePath("/todos");
}
 
export async function toggleTodo(id: string) {
  const todo = await db.todo.findUnique({ where: { id } });
  if (!todo) return { error: "Not found" };
 
  await db.todo.update({
    where: { id },
    data: { done: !todo.done },
  });
 
  revalidatePath("/todos");
}
 
export async function deleteTodo(id: string) {
  await db.todo.delete({ where: { id } });
  revalidatePath("/todos");
}

// app/todos/page.tsx (Server Component)
import { db } from "@/lib/db";
import { addTodo } from "@/app/actions/todo";
import { TodoItem } from "./todo-item";
 
export default async function TodosPage() {
  const todos = await db.todo.findMany({ orderBy: { createdAt: "desc" } });
 
  return (
    <main className="max-w-md mx-auto p-6">
      <h1 className="text-2xl font-bold mb-4">Todos</h1>
 
      <form action={addTodo} className="flex gap-2 mb-6">
        <input
          name="text"
          placeholder="What needs doing?"
          className="flex-1 border rounded px-3 py-2"
          required
        />
        <button
          type="submit"
          className="bg-blue-600 text-white px-4 py-2 rounded"
        >
          Add
        </button>
      </form>
 
      <ul className="space-y-2">
        {todos.map((todo) => (
          <TodoItem key={todo.id} todo={todo} />
        ))}
      </ul>
    </main>
  );
}

// app/todos/todo-item.tsx
"use client";
 
import { useTransition } from "react";
import { toggleTodo, deleteTodo } from "@/app/actions/todo";
 
type Todo = { id: string; text: string; done: boolean };
 
export function TodoItem({ todo }: { todo: Todo }) {
  const [isPending, startTransition] = useTransition();
 
  return (
    <li
      className={`flex items-center gap-3 p-2 border rounded ${
        isPending ? "opacity-50" : ""
      }`}
    >
      <input
        type="checkbox"
        checked={todo.done}
        onChange={() => startTransition(() => toggleTodo(todo.id))}
      />
      <span className={todo.done ? "line-through text-gray-400" : "flex-1"}>
        {todo.text}
      </span>
      <button
        onClick={() => startTransition(() => deleteTodo(todo.id))}
        className="text-red-500 text-sm"
      >
        Delete
      </button>
    </li>
  );
}

export default function Page() {
  async function handleSubmit(formData: FormData) {
    "use server";
    const email = formData.get("email") as string;
    await subscribeToNewsletter(email);
  }
 
  return (
    <form action={handleSubmit}>
      <input name="email" type="email" required />
      <button type="submit">Subscribe</button>
    </form>
  );
}

"use client";
 
import { useActionState } from "react";
import { createUser } from "@/app/actions/user";
 
type State = { error?: string; success?: boolean };
 
export function SignupForm() {
  const [state, formAction, isPending] = useActionState<State, FormData>(
    createUser,
    { error: undefined, success: false }
  );
 
  return (
    <form action={formAction}>
      <input name="email" type="email" required />
      {state.error && <p className="text-red-500">{state.error}</p>}
      <button type="submit" disabled={isPending}>
        {isPending ? "Creating..." : "Sign Up"}
      </button>
    </form>
  );
}

"use client";
 
import { useOptimistic, useTransition } from "react";
import { addTodo } from "@/app/actions/todo";
 
export function TodoList({ todos }: { todos: Todo[] }) {
  const [optimisticTodos, addOptimistic] = useOptimistic(
    todos,
    (state, newTodo: string) => [
      ...state,
      { id: crypto.randomUUID(), text: newTodo, done: false },
    ]
  );
  const [, startTransition] = useTransition();
 
  return (
    <form
      action={(formData) => {
        const text = formData.get("text") as string;
        startTransition(async () => {
          addOptimistic(text);
          await addTodo(formData);
        });
      }}
    >
      <input name="text" required />
      <button type="submit">Add</button>
      <ul>
        {optimisticTodos.map((t) => (
          <li key={t.id}>{t.text}</li>
        ))}
      </ul>
    </form>
  );
}

// Server Action signature when used with <form action>
export async function myAction(formData: FormData): Promise<void> {
  "use server";
  // ...
}
 
// Server Action with useActionState -- receives previous state + formData
export async function myAction(
  prevState: { error?: string },
  formData: FormData
): Promise<{ error?: string }> {
  "use server";
  // ...
}
 
// Server Action called directly (not from a form)
export async function deleteItem(id: string): Promise<{ success: boolean }> {
  "use server";
  // ...
}