Next.js.

Mit dem App Router ist eine Server Action der kürzeste Weg: Der Browser postet an deinen eigenen Server, der an Mailan weiterreicht. Damit verlässt die Anfrage den Browser gar nicht erst — praktisch bei einer strengen CSP.

Server Action

Das Formular funktioniert ohne JavaScript, weil die Action auf dem Server läuft. Den Access-Key legst du als MAILAN_KEY in die .env.local.

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> ); }

Oder direkt aus dem Browser

Ohne Server Action postet die Client-Komponente direkt. Der Access-Key ist absichtlich öffentlich, das ist also unbedenklich — er identifiziert nur das Formular.

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> ); }