I am learning nextjs 14 (AppRoute). I want to validate a form using zod in my nextjs project. Under the each form input I want to show error’s from zod and if server action failed to insert values(formData) to server or any other error occured in server I want to render that error on top of my form.

This is my form component…

import { registerUser } from "@/app/actions";

export default function RegistrationForm() {
  return (
    <form className='login-form' action={registerUser}>
      <div>
        <label htmlFor='fname'>First Name</label>
        <input type='text' name='firstName' id='fname' />
        {/* if error occured in firstName validation ------> show error about firstName */}
      </div>

      <div>
        <label htmlFor='lname'>Last Name</label>
        <input type='text' name='lastName' id='lname' />
        {/* if error occured in lastName validation ------> show error about lasstName */}
      </div>
      <div>
        <label htmlFor='email'>Email Address</label>
        <input type='email' name='email' id='email' />
        {/* if error occured in email validation ------> show error about email */}
      </div>

      <div>
        <label htmlFor='password'>Password</label>
        <input type='password' name='password' id='password' />
        {/* if error occured in password validation ------> show error about password */}
      </div>

      <button
        type='submit'
        className='bg-[#eb4a36] py-3 rounded-md text-white w-full mt-4'
      >
        Create Account
      </button>
    </form>
  );
}

this is server action…

"use server";

import { createUser } from "@/db/queries";
import { redirect } from "next/navigation";

async function registerUser(formData) {
  try {
    const user = Object.fromEntries(formData);
    const created = await createUser(user);
  } catch (error) {
    throw error.message;
  }

  if (created) {
    redirect("/login");
  }
}

export { registerUser };

createUser function to insert formData into mongoDB

async function createUser(user) {
  try {
    await connectMongo();
    return await userModel.create(user);
  } catch (error) {
    throw error;
  }
}

export {createUser}

So I need help to integrate zod validation and handle error for both client and server side in my project.