Skip to main content
Integrating Novu Framework with React.Email for your Next.js application can be done in three steps. If you don’t have an app, you can create one with the create-novu-app command.
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),
    }
  });
});