Email

In SuperDir, there are several email templates which we have integrated and you can use directly.

launch-reminder.tsx - On the launch day, Send email reminders to users about their ongoing launches.
reset-password.tsx - Send a password reset email.
verify.tsx - Send a registration verification email.
winner-badge.tsx - On the launch day, Send email notifications to the winners of the day.

Configuration

Set `from` and `to` mail address

set the from mail address EMAIL_FROM environment variable. This is the mail address that will be used as the sender of all mails. Please make sure that the mail address and domain are verified in your mail provider.
set the NEXT_PUBLIC_CONTACT_EMAIL environment variable. This is the mail address that users will use to contact you.

.env

NEXT_PUBLIC_CONTACT_EMAIL=
EMAIL_FROM=

Set Email Provider

You can use Resend or Plunk as mail service provider. They both offer a free credit, and Plunk is open-source and can be self-hosted.

.env

# plunk or resend
EMAIL_PROVIDER=
 
# [only required if you use resend]
#RESEND_API_KEY=
 
# [only required if you use plunk]
#PLUNK_TOKEN=
## [only required if you use self-hosted Plunk]
#PLUNK_BASE_URL=https://plunk.yourdomain/api/v1/

Set Audiences [optional]

By default, when you sign up new users, they are automatically added to your email provider's audience. This allows you to use provider's audience feature to send newsletter emails to your audiences.

.env

# only required if you want to automatically add new users to the Resend audience when signed up. [true by default, set to false to disable]
ADD_TO_EMAIL_AUDIENCE_WHEN_SIGNED_UP=false
 
# only required if you want to support resend audience (not needed for plunk)
#RESEND_AUDIENCE_ID=your_audience_id

Email Templates

We integrates React Email - a collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript. The templates, located in the /emails directory.

If you want to modify the email template, you can directly modify the corresponding '.tsx' file in the '/emails' folder.

Create a mail template

To create a new mail template, simply create a new .tsx in the emails folder. This is a simple example of a mail template:

import { Button, Html } from "@react-email/components";
import * as React from "react";
 
export default function Email() {
  return (
    <Html>
      <Button
        href="https://example.com"
        style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
      >
        Click me
      </Button>
    </Html>
  );
}

Previewing Emails

To preview the emails templates:

Terminal

pnpm dev:email

The react email preview runs on http://localhost:3003.

Email

Configuration

Set from and to mail address

Set Email Provider

Set Audiences [optional]

Email Templates

Create a mail template

Previewing Emails

On this page

Set `from` and `to` mail address