Integrating Novu Echo with React.Email for your Next.js application can be done in three steps. If you don’t have an app, you can clone our Next.js example.

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 Echo Workflow using the above template

import { renderEmail } from './react-email.template';
import { Echo } from '@novu/echo';

const echo = new Echo();

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

Was this page helpful?

IntroductionVue E-mail