Email

next-forge has two email systems:

1. Clerk, which handles authentication and authorization emails automatically; and
2. Resend, which is used for sending transactional emails. This is powered by React Email templates.

Clerk

Clerk handles authentication and authorization emails automatically. You can configure the theming of Clerk-sent emails in their dashboard.

Resend

We use Resend to send transactional emails. The templates, located in packages/email-templates, are powered by React Email - a collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript.

Email Templates

The email-templates package is separated from the app folder for two reasons:

1. We can import them into the email app, allowing for previewing them in the UI; and
2. We can import them into our other apps and use them to send emails.

Resend and React Email play nicely together. For example, here's how we send the contact form email:

await resend.emails.send({
  from,
  to: from,
  subject: 'Contact form submission',
  replyTo: email,
  react: <ContactTemplate name={name} email={email} message={message} />,
});

Previewing Emails

To preview the emails templates, simply run the email app:

pnpm dev --filter email