Confused about handling form submissions with Server Actions in Next.js 15

[NourMoftah]

Summary

hello there

I'm exploring the new Server Actions feature in Next.js 15, and I'm a bit confused about how to handle form submissions properly.

For example, I have a simple contact form:

It works fine locally, but I'm wondering —

1- Is this approach still recommended for production apps?

2- Should I handle validation inside the action or client-side first?

3- What’s the best way to return a success/error message back to the user?

Any examples or advice would be super helpful 🙏

Thanks in advance!

Additional information

``jsx
<form action={sendMessage}>
  <input type="text" name="name" />
  <input type="email" name="email" />
  <textarea name="message" />
  <button type="submit">Send</button>
</form>


and my server action looks like this:

'use server'
export async function sendMessage(formData) {
  const name = formData.get('name')
  console.log('New message from:', name)
}

Example

No response

[icyJoseph]

1- Is this approach still recommended for production apps?
2- Should I handle validation inside the action or client-side first?

Almost, prod ready, but you got it right, you should do validation and a tad more. Client side validation is to help your users submit the data that's most likely to succeed their operation, reducing friction when you require certain formats/types of data. Infamously, emails, passwords, identity numbers, and a few other fields often have strict format/shape requirements, you wouldn't want your user to submit the form only to then, tell them that a field was incorrectly formatted.

Server side validation ought to always be in place, and it is not just for type safety, but correctness toward your resources. You definitely don't want malformed data, incorrect, or pass through from users, reaching into your database or forwarded to other services. You need to verify each field, each value, take only those your operation require (filter), and enforce your business rules on the incoming values.

3- What’s the best way to return a success/error message back to the user?

I'd say, useActionState, cuz it handles resolving the server action result, and you get an object with state, so you can check if (result.errors) or the like, to give more feedback on the operation.

[NourMoftah]

Thank you @icyJoseph , this information was very helpful to me.

[abhishekmardiya]

1. Yes, this approach works perfectly fine.

2. If you’re using a separate backend, there’s no need to perform validation in the server action since the backend already takes care of it — frontend validation is sufficient in that case. You can use Valibot or Zod for handling validation. However, if you’re using Next.js as your backend, make sure to include proper server-side validations there as well.

3. You can trigger client-side validation first, and only if the validation passes, proceed to trigger the server action. You can then return success or error messages from the server actions based on the responses you receive from the backend.

You can reference this repo for better understanding: QuestionForm.tsx

[NourMoftah]

Thank you @abhishekmardiya , this information was very helpful to me.