AI Builder-gidsen

v0 + WeSender

v0 genereert React UI-componenten die je exporteert naar een Next.js-project. E-mailverzending zet je in een Server Action zodat de API-sleutel server-side blijft en nooit in de browser verschijnt.

Server Action

Maak een nieuw bestand app/actions/sendEmail.ts en voeg de Server Action toe:

app/actions/sendEmail.ts

"use server"

export async function sendEmail(formData: FormData) {
  const to      = formData.get("email") as string
  const subject = formData.get("subject") as string
  const html    = formData.get("html") as string

  const res = await fetch("https://api.wesender.nl/v1/emails", {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${process.env.WESENDER_API_KEY}`,
      "Content-Type":  "application/json",
    },
    body: JSON.stringify({
      from: "noreply@jouwdomein.nl",
      to,
      subject,
      html,
    }),
  })

  if (!res.ok) {
    throw new Error(`WeSender-fout: ${res.statusText}`)
  }

  const { id } = await res.json()
  return { id }
}

Koppelen aan een v0-component

Importeer de Server Action in het geexporteerde v0-component en koppel hem als action prop aan een formulier:

components/ContactForm.tsx

import { sendEmail } from "@/app/actions/sendEmail"

export function ContactForm() {
  return (
    <form action={sendEmail}>
      <input type="email" name="email" placeholder="Jouw e-mailadres" required />
      <input type="text" name="subject" placeholder="Onderwerp" required />
      <textarea name="html" placeholder="Bericht (HTML toegestaan)" required />
      <button type="submit">Versturen</button>
    </form>
  )
}

Omgevingsvariabele

.env.local

# .env.local (lokale ontwikkeling)
WESENDER_API_KEY=jouw_sleutel

Voor productie voeg je WESENDER_API_KEY toe aan de Environment Variables in je Vercel-project via het Vercel-dashboard of de CLI.

Zie ook het volledige overzicht op wesender.nl/ai/integraties/v0.