サーバー側で送信したデータを取得するには

formDataからgetを使用して取得する

export async function formAction(prevState: unknown, formData: FormData) {
  await new Promise((resolve) => setTimeout(resolve, 3000));
  const results = parseWithZod(formData, { schema: formSchema });
  console.log(formData);
  console.log(formData.get("email") as string);
  console.log(formData.get("message") as string);

  if (results.status !== "success") {
    return results.reply();
  }

  redirect("/conform");
}

または、parseWithZodの戻り値であるpayroadを使用して取得する

export async function formAction(prevState: unknown, formData: FormData) {
  await new Promise((resolve) => setTimeout(resolve, 3000));
  const results = parseWithZod(formData, { schema: formSchema });
  // console.log(formData);
  // console.log(formData.get("email") as string);
  // console.log(formData.get("message") as string);

  console.log(results.payload.email);
  console.log(results.payload.message);

  if (results.status !== "success") {
    return results.reply();
  }

  redirect("/conform");

どちらも補完が効かない

form側ではconformのユーティリティを使用しておけばname等の設定をしなくていい

const ServerForm = () => {
  const [lastResult, action] = useFormState(formAction, undefined);
  const [form, fields] = useForm({
    lastResult,
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: formSchema });
    },
    shouldValidate: "onBlur",
  });

  return (
    <div>
      <h2>ServerForm</h2>
      <form
        action={action}
        {...getFormProps(form)}
        onSubmit={form.onSubmit}
        noValidate
      >
        <Input {...getInputProps(fields.email, { type: "email" })} />
        <p>{fields.email.errors}</p>
        <Input {...getInputProps(fields.message, { type: "text" })} />
        <p>{fields.message.errors}</p>
        <SubmitButton>ログイン</SubmitButton>
      </form>
    </div>
  );
};

Next.js 14 Conform Tutorial