How would you handle errors gracefully inside a server action and display a meaningful message to the user?

You wrap the risky part of your server action in a try and catch block, and instead of letting an unhandled error crash the request, you return a structured object describing what went wrong, which the calling client component can then read, often through the useActionState hook, to show an appropriate error message.

'use server';

export async function createAccount(prevState, formData) {
  try {
    await db.user.create({ data: { email: formData.get('email') } });
    return { success: true };
  } catch (error) {
    return { success: false, message: 'This email is already registered.' };
  }
}