Skip to main content
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';

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