nextjsreactserver-actions
Next.js Server Actions Guide
Learn how to use Server Actions in Next.js 14
1 min readBy Lisham
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.