In Next.js 14, Server Actions represent a fundamental shift in how developers handle data mutations. Instead of creating an API endpoint, defining request bodies, and fetching from the client, you can write server-side code that runs directly in response to user actions.
What are Server Actions?
Server Actions are asynchronous functions that are executed on the server. They can be defined in Server Components or exported from separate files. They integrate tightly with forms, allowing progressive enhancement where the form works even if JavaScript hasn't loaded yet.
A Complete Example
Here is how you define a Server Action to handle user feedback and save it to a database:
'use server';
import { revalidatePath } from 'next/cache';
export async function submitFeedback(formData: FormData) {
const email = formData.get('email');
const message = formData.get('message');
if (!email || !message) {
return { error: 'All fields are required.' };
}
// Simulate database save
console.log(`Saving feedback from ${email}: ${message}`);
await new Promise((resolve) => setTimeout(resolve, 1000));
// Revalidate cache to update UI
revalidatePath('/feedback');
return { success: true };
}And here is the React component using this Server Action:
'use client';
import { submitFeedback } from '../actions';
import { useState } from 'react';
export default function FeedbackForm() {
const [status, setStatus] = useState<string>('');
async function handleAction(formData: FormData) {
setStatus('Submitting...');
const result = await submitFeedback(formData);
if (result.error) {
setStatus(result.error);
} else {
setStatus('Feedback submitted successfully!');
}
}
return (
<form action={handleAction} className="flex flex-col gap-4 max-w-md mx-auto">
<input
type="email"
name="email"
placeholder="Your Email"
required
className="border p-2 rounded"
/>
<textarea
name="message"
placeholder="Your Feedback"
required
className="border p-2 rounded"
/>
<button type="submit" className="bg-blue-600 text-white p-2 rounded">
Send Feedback
</button>
{status && <p className="text-sm font-medium">{status}</p>}
</form>
);
}Key Benefits
- Server Actions offer multiple benefits for modern applications:
- Reduced Boilerplate: No need to define API endpoints or fetch wrappers.
- End-to-End Type Safety: Easily share types between client and server code.
- Progressive Enhancement: Forms work natively even with JavaScript disabled.
In conclusion, Server Actions simplify full-stack React development, bringing frontend and backend interaction closer than ever before.
