Next.js.

With the App Router a server action is the shortest path: the browser posts to your own server, which forwards to Mailan. That keeps the request out of the browser entirely — useful when a strict CSP is in play.

Server action

The form works without JavaScript, because the action runs on the server. Put the access key in .env.local as MAILAN_KEY.

TSX

// app/contact/page.tsx export default function ContactPage() { async function submit(formData: FormData) { "use server"; const res = await fetch( `https://mailan.email/api/submit/${process.env.MAILAN_KEY}`, { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json" }, body: JSON.stringify(Object.fromEntries(formData)), }, ); if (!res.ok) throw new Error("Submission failed"); } return ( <form action={submit}> <input name="name" required /> <input name="email" type="email" required /> <textarea name="message" required /> <input type="text" name="botcheck" hidden tabIndex={-1} autoComplete="off" /> <button type="submit">Senden</button> </form> ); }

Or straight from the browser

Without a server action the client component posts directly. The access key is public by design, so this is safe — it only identifies the form.

TSX

"use client"; import { useState } from "react"; export function ContactForm() { const [sent, setSent] = useState(false); return sent ? ( <p>Danke!</p> ) : ( <form onSubmit={async (e) => { e.preventDefault(); const data = Object.fromEntries(new FormData(e.currentTarget)); await fetch(`https://mailan.email/api/submit/${process.env.NEXT_PUBLIC_MAILAN_KEY}`, { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json" }, body: JSON.stringify(data), }); setSent(true); }} > <input name="email" type="email" required /> <textarea name="message" required /> <button type="submit">Senden</button> </form> ); }