Server Actions - Call server-side functions directly from client components

// app/actions.ts
"use server";
 
import { db } from "@/lib/db";
import { revalidatePath } from "next/cache";
 
export async function createPost(formData: FormData) {
  const title = formData.get("title") as string;
  const body = formData.get("body") as string;
 
  await db.insert("posts", { title, body, createdAt: new Date() });
  revalidatePath("/posts");
}

// app/posts/NewPostForm.tsx
"use client";
 
import { createPost } from "../actions";
 
export default function NewPostForm() {
  return (
    <form action={createPost}>
      <input name="title" placeholder="Title" required />
      <textarea name="body" placeholder="Write your post..." required />
      <button type="submit">Publish</button>
    </form>
  );
}

// A complete todo app with server actions, validation, and error handling
// app/actions.ts
"use server";
 
import { z } from "zod";
import { db } from "@/lib/db";
import { revalidatePath } from "next/cache";
 
const TodoSchema = z.object({
  text: z.string().min(1, "Todo text is required").max(200, "Too long"),
});
 
export type ActionResult = {
  success: boolean;
  error?: string;
};
 
export async function addTodo(_prev: ActionResult, formData: FormData): Promise<ActionResult> {
  const parsed = TodoSchema.safeParse({ text: formData.get("text") });
 
  if (!parsed.success) {
    return { success: false, error: parsed.error.errors[0].message };
  }
 
  try {
    await db.insert("todos", {
      text: parsed.data.text,
      completed: false,
      createdAt: new Date(),
    });
    revalidatePath("/todos");
    return { success: true };
  } catch {
    return { success: false, error: "Failed to save todo" };
  }
}
 
export async function toggleTodo(id: string) {
  const todo = await db.findById("todos", id);
  if (!todo) throw new Error("Not found");
 
  await db.update("todos", id, { completed: !todo.completed });
  revalidatePath("/todos");
}
 
export async function deleteTodo(id: string) {
  await db.delete("todos", id);
  revalidatePath("/todos");
}

// app/todos/TodoApp.tsx
"use client";
 
import { useActionState, useOptimistic, useTransition } from "react";
import { addTodo, toggleTodo, deleteTodo, type ActionResult } from "../actions";
 
type Todo = { id: string; text: string; completed: boolean };
 
export default function TodoApp({ todos }: { todos: Todo[] }) {
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newText: string) => [
      ...state,
      { id: "optimistic", text: newText, completed: false },
    ]
  );
 
  const [state, formAction, isPending] = useActionState(
    async (prev: ActionResult, formData: FormData) => {
      const text = formData.get("text") as string;
      addOptimisticTodo(text);
      return addTodo(prev, formData);
    },
    { success: true }
  );
 
  return (
    <div>
      <h1>Todos</h1>
 
      <form action={formAction}>
        <input name="text" placeholder="What needs doing?" disabled={isPending} />
        <button type="submit" disabled={isPending}>
          {isPending ? "Adding..." : "Add"}
        </button>
        {state.error && <p className="text-red-500">{state.error}</p>}
      </form>
 
      <ul>
        {optimisticTodos.map((todo) => (
          <TodoItem key={todo.id} todo={todo} />
        ))}
      </ul>
    </div>
  );
}
 
function TodoItem({ todo }: { todo: Todo }) {
  const [isPending, startTransition] = useTransition();
 
  return (
    <li className={isPending ? "opacity-50" : ""}>
      <label>
        <input
          type="checkbox"
          checked={todo.completed}
          onChange={() => startTransition(() => toggleTodo(todo.id))}
        />
        <span className={todo.completed ? "line-through" : ""}>{todo.text}</span>
      </label>
      <button onClick={() => startTransition(() => deleteTodo(todo.id))}>
        Delete
      </button>
    </li>
  );
}

// The action is defined inline and closes over server-side data
export default async function LikePage() {
  let likes = await db.getLikes();
 
  async function addLike() {
    "use server";
    await db.incrementLikes();
  }
 
  return (
    <div>
      <p>Likes: {likes}</p>
      <form action={addLike}>
        <button type="submit">Like</button>
      </form>
    </div>
  );
}

"use client";
 
import { useTransition } from "react";
import { deleteItem } from "./actions";
 
function DeleteButton({ id }: { id: string }) {
  const [isPending, startTransition] = useTransition();
 
  return (
    <button
      disabled={isPending}
      onClick={() => startTransition(async () => {
        await deleteItem(id);
      })}
    >
      {isPending ? "Deleting..." : "Delete"}
    </button>
  );
}

// Partially apply the id so the form only sends FormData
import { updateItem } from "./actions";
 
function EditForm({ id }: { id: string }) {
  const updateWithId = updateItem.bind(null, id);
  return (
    <form action={updateWithId}>
      <input name="name" />
      <button type="submit">Save</button>
    </form>
  );
}