Laatst bijgewerkt: 2026-03-25•6 min leestijd

React Email gebruiken met Truncus

Ontwerp e-mailtemplates met React-componenten. Verstuur ze via Truncus met EU-dataresidentie en bezorgingsmonitoring.

React Email is de open-source standaard voor het bouwen van e-mailtemplates met React-componenten in plaats van HTML-tabellen. Truncus regelt de bezorgingsinfrastructuur — authenticatie, bounce-suppressie, tracking en compliance. Samen: ontwerp in React, verstuur via Truncus.

React Email installeren

npm install react-email @react-email/components

Dit geeft je e-mail-veilige React-componenten (Html, Head, Body, Container, Section, Text, Button, Hr, Img, Preview en meer) die renderen naar cross-client HTML.

Template maken

Maak een emails/-map in je project. Elk bestand exporteert een React-component die een e-mailtemplate voorstelt.

// emails/welcome.tsx
import {
  Html, Head, Body, Container, Section,
  Text, Button, Hr, Img, Preview
} from '@react-email/components';

interface WelcomeEmailProps {
  name: string;
  loginUrl: string;
}

export default function WelcomeEmail({ name, loginUrl }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>Welkom op ons platform, {name}!</Preview>
      <Body style={{ fontFamily: '-apple-system, sans-serif', background: '#f4f4f5', padding: '40px 0' }}>
        <Container style={{ background: '#ffffff', padding: '40px', borderRadius: '8px', maxWidth: '560px' }}>
          <Text style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '16px' }}>
            Welkom, {name}!
          </Text>
          <Text style={{ color: '#52525b', lineHeight: '1.6' }}>
            Bedankt voor je registratie. Je account is klaar.
          </Text>
          <Hr style={{ margin: '24px 0' }} />
          <Button
            href={loginUrl}
            style={{
              background: '#18181b',
              color: '#ffffff',
              padding: '12px 24px',
              borderRadius: '6px',
              fontWeight: '500',
              textDecoration: 'none',
            }}
          >
            Naar Dashboard
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

Lokaal bekijken

npx react-email dev

Dit opent localhost:3000 met een live preview van alle templates in je emails/-map.

Renderen en versturen via Truncus

Als je template er goed uitziet, render je het naar HTML en stuur je het naar de Truncus API.

Methode A: Node.js met fetch

import { render } from '@react-email/render';
import WelcomeEmail from './emails/welcome';

const html = await render(WelcomeEmail({
  name: 'Jasper',
  loginUrl: 'https://your-app.com/dashboard',
}));

const response = await fetch('https://truncus.co/api/v1/emails/send', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.TRUNCUS_API_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    from: 'hello@yourdomain.com',
    to: 'user@example.com',
    subject: 'Welkom!',
    html: html,
  }),
});

const { messageId } = await response.json();
console.log('Verstuurd:', messageId);

Methode B: Truncus CLI

npx react-email export emails/welcome.tsx --out ./out

truncus send \
  --to user@example.com \
  --from hello@yourdomain.com \
  --subject "Welkom!" \
  --html-file ./out/welcome.html

Methode C: Next.js API-route

// app/api/send-welcome/route.ts
import { render } from '@react-email/render';
import WelcomeEmail from '@/emails/welcome';

export async function POST(request: Request) {
  const { name, email } = await request.json();

  const html = await render(WelcomeEmail({
    name,
    loginUrl: 'https://your-app.com/dashboard',
  }));

  const response = await fetch('https://truncus.co/api/v1/emails/send', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.TRUNCUS_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      from: 'hello@yourdomain.com',
      to: email,
      subject: 'Welkom!',
      html,
    }),
  });

  return Response.json(await response.json());
}

Veelgebruikte templates

De meeste applicaties hebben dezelfde set transactionele e-mails nodig. React Email biedt een template-galerij met productieklare startpunten voor:

  • Welkom / onboarding — eerste indruk na registratie
  • Wachtwoord resetten — beveiligde, eenmalige link met vervaldatum
  • Factuur / ontvangstbewijs — regelitems, totalen, betalingsbevestiging
  • Melding / waarschuwing — statuswijzigingen, drempelwaarschuwingen
  • Wekelijkse samenvatting — gebruiksoverzicht, activiteitenoverzicht

Waarom Truncus + React Email

  • Ontwerp in React, niet HTML-tabellen. React Email componenten regelen cross-client rendering.
  • Lokaal bekijken en itereren. npx react-email dev geeft je hot-reloading previews.
  • Truncus regelt de moeilijke delen. Bezorgingsmonitoring, bounce-suppressie, webhook-events en automatische herhaalpogingen.
  • EU-dataresidentie standaard. Alle e-maildata wordt verwerkt en opgeslagen in eu-west-1.
  • Werkt met elke integratie. Verstuur via het Node.js SDK, de fetch API, CLI, Python SDK of de MCP-server.

Volgende stappen

React Email gebruiken met Truncus — E-mailtemplate-gids