Skip to main content
Integrating Novu Framework with React.Email for your Next.js application can be done in three steps.
Don’t have an existing Novu Next.js app yet? Visit our Quickstart guide to create one.
1

Install React.Email components

Install the required React.Email components.
  npm i @react-email/components react-email
2

Write your email

Create a new sample-email.tsx file for your email template.
import * as React from "react";
import { Button, Html } from "@react-email/components";

function Email(props) {
  return (
    <Html>
      <Button
        href="https://example.com"
        style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
      >
        Click me
      </Button>
    </Html>
  );
}

export function renderEmail(inputs) {
  return render(<Email {...inputs} />);
}
3

Write your workflow

Define your workflow using the above template
import { renderEmail } from './sample-email.tsx';
import { workflow } from '@novu/framework';

workflow('new-signup', async ({ step, payload }) => {
  await step.email('send-email', async (inputs) => {
    return {
      subject: `Welcome to React E-mail`,
      body: renderEmail(inputs),
    }
  });
});