Next.js contact form with email (App Router)

// app/contact/actions.ts
"use server";

export async function sendContact(_: unknown, formData: FormData) {
  const res = await fetch("https://app.formsmtp.com/api/v1/send", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.FORMSMTP_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      to: "you@yourdomain.com",
      replyTo: formData.get("email"),
      subject: `New message from ${formData.get("name")}`,
      text: String(formData.get("message")),
    }),
  });
  const data = await res.json();
  return data.success ? { ok: true } : { ok: false, error: data.error };
}

// app/contact/page.tsx
"use client";
import { useActionState } from "react";
import { sendContact } from "./actions";

export default function ContactPage() {
  const [state, action, pending] = useActionState(sendContact, null);
  if (state?.ok) return <p>Thanks! We'll get back to you soon.</p>;
  return (
    <form action={action}>
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required />
      <button disabled={pending}>{pending ? "Sending…" : "Send"}</button>
      {state?.error && <p role="alert">{state.error}</p>}
    </form>
  );
}

"use client";
import { useState } from "react";

export default function ContactForm() {
  const [status, setStatus] = useState<"idle" | "sending" | "sent" | "error">("idle");

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("sending");
    const res = await fetch("https://app.formsmtp.com/api/v1/form/" + process.env.NEXT_PUBLIC_FORMSMTP_KEY, {
      method: "POST",
      headers: { Accept: "application/json" },
      body: new URLSearchParams(new FormData(e.currentTarget) as any),
    });
    setStatus((await res.json()).success ? "sent" : "error");
  }

  if (status === "sent") return <p>Thanks! Message sent.</p>;
  return (
    <form onSubmit={onSubmit}>
      <input name="name" required />
      <input name="email" type="email" required />
      <textarea name="message" required />
      <button disabled={status === "sending"}>Send</button>
      {status === "error" && <p role="alert">Something went wrong. Please try again.</p>}
    </form>
  );
}