export async function createCharacter(
  formData: FormData
): Promise<CharacterFormState> {
  console.log(formData);
  const result = characterSchema.safeParse({
    name: formData.get("name"),
    nickname: formData.get("nickname"),
  });
  ...

import CharacterForm from "@/components/character-form";
import { createCharacter } from "../actions/characters";

export default function Page() {
  return (
    <div>
      <h2>Create your character</h2>
      <CharacterForm
        formAction={createCharacter}
        initialData={{ name: "", nickname: "" }}
      ></CharacterForm>
    </div>
  );
}

"use client";

import { useFormState } from "react-dom";

interface FormErrors {
  name?: string[];
  nickname?: string[];
}

interface FormState {
  errors: FormErrors;
}

interface CharacterFormProps {
  formAction: any;
  initialData: {
    name: string;
    nickname: string;
  };
}
export default function CharacterForm({
  formAction,
  initialData,
}: CharacterFormProps) {
  const [formState, action] = useFormState<FormState>(formAction, {
    errors: {},
  });

  return (
    <>
      <form action={action}>
        <input type="text" name="name" id="name" />
        {formState.errors.name && <p>{formState.errors.name.join(", ")}</p>}
        <input type="text" name="nickname" id="nickname" />
        {formState.errors.nickname && (
          <p>{formState.errors.nickname.join(", ")}</p>
        )}
        <button type="submit">Save</button>
      </form>
    </>
  );
}

{ errors: {} }