New to Server Actions and NextJS.

Problem:
I need so make a basic form with:
- Name:string
- Mail:string
and on submit make a POST request to trigger a Google Cloud Function.

Note:
I want to use server actions and maybe shadcn ui.
I understood the need to make a seperate server component.


Action:

"use server";

export async function CloudFunction(formData: FormData) {
  const name = formData.get("name");
  const email = formData.get("email");
  const response = await fetch(
    "<....url cloud function...>",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ name, email }),
    }
  );
  const result = await response.json();
  console.log(result);
  return result;
}

Component Form:

"use client";

import { useState } from "react";
import { z } from "zod";
import { CloudFunction } from "../actions/CloudFunction";

const schema = z.object({
  name: z.string(),
  email: z.string().email(),
});

export const FormData = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [errors, setErrors] = useState([]);

  return (
    <form action={CloudFunction}>
      <div>
        <label htmlFor="name">Name:</label>
        <input
          type="text"
          id="name"
          value={name}
          onChange={(event) => setName(event.target.value)}
        />
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          id="email"
          value={email}
          onChange={(event) => setEmail(event.target.value)}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

I know both are wrong but at leas you have an idea of how bad i am on this 😄

Final Goal:
Form with mail and name -> Send Data to Cloud Function -> Cloud Function return a Json to be displayed in the UI.

Please Help