Server Actions

1
'use server';
2

3
import { revalidatePath } from 'next/cache';
4

5
export async function addTodo(
6
  prevState: ActionState,
7
  formData: FormData,
8
): Promise<ActionState> {
9
  const text = formData.get('text');
10

11
  // Validation
12
  if (!text || text.length < 3) {
13
    return {
14
      success: false,
15
      errors: { text: ['Must be at least 3 characters'] },
16
    };
17
  }
18

19
  // Save to database
20
  await db.todo.create({ text: text.toString() });
21

22
  revalidatePath('/server-actions');
23

24
  return { success: true, message: 'Todo added!' };
25
}

Demo

1. Add a todo using the form. Watch the loading state and success/error messages.
2. Toggle completion by clicking the checkbox. Notice the instant optimistic update.
3. Delete a todo by hovering and clicking "Delete". The item fades while the server processes.
4. Try validation by entering less than 3 characters or duplicate todos.
5. Bulk actions: Clear all completed items or reset the demo to initial state.
6. Observe revalidation: After mutations, the server revalidates and updates the UI.

Key Patterns

• useActionState: Manages form state with automatic error handling and reset
• useFormStatus: Shows pending state inside form components
• useOptimistic: Applies changes immediately, reverts on error
• useTransition: Non-blocking updates for non-form actions
• revalidatePath: Refreshes cached data after mutations

Visual Summary

Pitfalls & Tips

• Validate inputs on the server for security.
• Prefer optimistic updates only when failure states are well-defined.

Continue Learning

Links

• Server Actions Docs
• useActionState Hook
• useOptimistic Hook
• useFormStatus Hook