The Modern Next.js Email Stack: React Email, TypeScript, and Wire-Speed API Dispatch
Build a production-ready transactional email system in Next.js App Router with React Email templates, Server Actions, and wire-speed SendOFF API dispatch.
Why React Email Won the Template War
For over two decades, writing email templates meant suffering through 1990s table layouts, inline CSS hacks, and bizarre Outlook VML quirks.
React Email changed the paradigm by bringing standard React component architecture to email authoring. You write standard JSX with components like <Container>, <Section>, and <Button>, and the compiler transpiles it into clean, table-based HTML compatible with 40+ email clients.
Setting Up the Stack
Install the required packages in your Next.js project:
pnpm add @sendoff/client @react-email/componentsAdd your API key to .env.local:
SENDOFF_API_KEY=so_live_your_production_key_hereBuilding the Email Component
Create your template in emails/WelcomeEmail.tsx:
import * as React from 'react';
import {
Html,
Head,
Body,
Container,
Text,
Button,
Section,
Hr
} from '@react-email/components';
interface WelcomeEmailProps {
name: string;
loginUrl: string;
}
export function WelcomeEmail({ name, loginUrl }: WelcomeEmailProps) {
return (
<Html>
<Head />
<Body style={{ backgroundColor: '#09090b', fontFamily: 'sans-serif', color: '#ffffff' }}>
<Container style={{ margin: '0 auto', padding: '40px 20px', maxWidth: '560px' }}>
<Text style={{ fontSize: '24px', fontWeight: 'bold' }}>Welcome aboard, {name}!</Text>
<Text style={{ color: '#a1a1aa', fontSize: '14px', lineHeight: '24px' }}>
Your high-velocity workspace has been activated on SendOFF bare-metal clusters.
</Text>
<Section style={{ textAlign: 'center', margin: '30px 0' }}>
<Button
href={loginUrl}
style={{
backgroundColor: '#10b981',
color: '#000000',
fontWeight: 'bold',
padding: '12px 24px',
borderRadius: '8px',
textDecoration: 'none'
}}
>
Open Workspace
</Button>
</Section>
<Hr style={{ borderColor: '#27272a', margin: '20px 0' }} />
<Text style={{ color: '#71717a', fontSize: '12px' }}>
Sent via SendOFF Transactional Lane. Sub-50ms wire latency.
</Text>
</Container>
</Body>
</Html>
);
}Dispatching via Server Actions
Now create a type-safe Server Action in app/actions/send-welcome.ts:
'use server';
import { SendOffClient } from '@sendoff/client';
import { render } from '@react-email/components';
import { WelcomeEmail } from '@/emails/WelcomeEmail';
const sendoff = new SendOffClient({ apiKey: process.env.SENDOFF_API_KEY! });
export async function sendWelcomeAction(userEmail: string, userName: string) {
try {
const emailHtml = await render(
WelcomeEmail({ name: userName, loginUrl: 'https://app.yourdomain.com/dashboard' })
);
const { id } = await sendoff.emails.send({
from: 'Acme Onboarding <welcome@yourdomain.com>',
to: [userEmail],
subject: 'Welcome to Acme, ' + userName + '!',
html: emailHtml,
lane: 'transactional'
});
return { success: true, emailId: id };
} catch (error: any) {
console.error('Failed to dispatch welcome email:', error);
return { success: false, error: error.message };
}
}With this implementation, your Next.js application dispatches rendered emails with sub-50ms wire latency and full TypeScript type verification.
Priya Nambiar
Engineering Lead at SendOFF. Specializing in bare-metal KumoMTA socket tuning, dual-lane deliverability infrastructure, and low-latency API systems.