Next.js Server Actions Guide - Blog

Next.js Server Actions Guide - Blog | Matheo (cuttypie)

Server Actions are a powerful feature in Next.js 14 that allows you to run server-side code directly from your components. Let's explore how to use them effectively!

Basic Server Action

Here's a simple example of a Server Action:

"use server";
 
async function addTodo(formData: FormData) {
  const todo = formData.get("todo");
  await db.todos.create({ data: { text: todo } });
}

Using with Client Components

You can use Server Actions in your client components:

"use client";
 
export default function TodoForm() {
  return (
    <form action={addTodo}>
      <input name="todo" type="text" required />
      <button type="submit">Add Todo</button>
    </form>
  );
}

With Loading States

Here's how to handle loading states:

"use client";
 
import { useFormStatus } from "react-dom";
 
function SubmitButton() {
  const { pending } = useFormStatus();
 
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Adding..." : "Add Todo"}
    </button>
  );
}

Error Handling

Proper error handling is crucial:

"use server";
 
import { revalidatePath } from "next/cache";
 
async function addTodo(formData: FormData) {
  try {
    const todo = formData.get("todo");
    await db.todos.create({ data: { text: todo } });
    revalidatePath("/todos");
  } catch (error) {
    throw new Error("Failed to create todo");
  }
}

Best Practices

Always use the 'use server' directive at the top of files containing Server Actions
Validate input data before processing
Handle errors gracefully
Use revalidation when data changes
Consider optimistic updates for better UX

Server Actions make it easy to build interactive applications while keeping sensitive operations on the server. They're perfect for forms, data mutations, and any operation that needs server-side processing.

Basic Server Action

Using with Client Components

With Loading States

Error Handling

Best Practices

Comments