Skip to main content

​
Prerequisites

To get the most out of this guide, you’ll need to:

​
1. Install

Get the Emailr Node.js SDK. 
npm install emailr

​
2. Create an email template

Start by creating your email template on components/email-template.tsx.
components/email-template.tsx
import * as React from 'react';

interface EmailTemplateProps {
  firstName: string;
}

export function EmailTemplate({ firstName }: EmailTemplateProps) {
  return (
    <div>
      <h1>Welcome, {firstName}!</h1>
    </div>
  );
}

​
3. Send email using React

Create a route file under app/api/send/route.ts (or pages/api/send.ts if you’re using Pages Router). Import the React email template and send an email using the react parameter. 
import { EmailTemplate } from '../../../components/EmailTemplate';
import { Emailr } from 'emailr';

const emailr = new Emailr(process.env.EMAILR_API_KEY);

export async function POST() {
  try {
    const { data, error } = await emailr.emails.send({
      from: 'Acme <onboarding@emailr.dev>',
      to: ['delivered@emailr.dev'],
      subject: 'Hello world',
      react: EmailTemplate({ firstName: 'John' }),
    });

    if (error) {
      return Response.json({ error }, { status: 500 });
    }

    return Response.json(data);
  } catch (error) {
    return Response.json({ error }, { status: 500 });
  }
}

​
4. Try it yourself

Next.js Example (App Router)

See the full source code.

Next.js Example (Pages Router)

See the full source code.