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.


Install React.Email components

Install the required React.Email components.

  npm i @react-email/components react-email

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 (
        style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
        Click me

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

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'send-email', async (inputs) => {
    return {
      subject: `Welcome to React E-mail`,
      body: renderEmail(inputs),