Integraties

E-mail versturen vanuit v0

Genereer React-componenten met Vercel v0, verstuur mail via WeSender.

Bouw-tool TypeScript

Vereisten

  • Vercel-account met toegang tot v0.dev
  • WeSender-account met geverifieerd domein
  • Next.js-project (v0 exporteert naar Next.js)

Stap 1: Genereer een UI-component met v0

Open v0.dev en prompt een component dat een e-mail trigger nodig heeft, bijvoorbeeld een contactformulier of een bestelbevestiging. v0 genereert React-code die je exporteert naar een Next.js-project.

Stap 2: Exporteer het component naar Next.js

Klik op 'Export' in v0 en importeer de code in je lokale Next.js-project of in een Vercel-project. Zorg dat je Next.js 14 of hoger gebruikt zodat Server Actions beschikbaar zijn.

Stap 3: Voeg een Server Action toe voor e-mailverzending

Maak een nieuw bestand app/actions/sendEmail.ts en voeg de Server Action toe. Server Actions draaien server-side, dus de API-sleutel is nooit zichtbaar in de browser.

Stap 4: Koppel de action aan het v0-component

Open het geexporteerde v0-component en voeg de Server Action toe als form action of als onClick-handler. Gebruik 'use server' bovenaan het actiebestand.

Stap 5: Stel de omgevingsvariabele in en deploy

Voeg WESENDER_API_KEY toe aan je .env.local voor lokale ontwikkeling en aan de Vercel Environment Variables voor productie. Deploy via Vercel CLI of de Vercel-dashboard.

Volledig voorbeeld

Hier is de volledige implementatie in 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 }
}

Veelgestelde vragen

v0 genereert client-side code. Hoe voorkom ik dat de API-sleutel in de browser komt?

Gebruik altijd een Server Action (bestand begint met 'use server') of een API-route (app/api/send-email/route.ts). v0-componenten zelf zijn client-side React, maar de e-mailverzending moet altijd server-side.

Kan ik de WeSender Node SDK gebruiken in een Server Action?

Ja. Installeer @wesender/node en gebruik: import { Wesender } from '@wesender/node'; const client = new Wesender(process.env.WESENDER_API_KEY!); const result = await client.emails.send({...});

v0 heeft geen server-side code gegenereerd. Moet ik dat zelf schrijven?

Ja. v0 genereert UI-componenten. De server-side logica voor e-mail schrijf je zelf in een Server Action of API-route. Dat is maar een enkel bestand en volgt exact het patroon in de voorbeeldcode boven.

Volgende stappen