Breadcrumbs

Sending Emails

Learn How to Send Emails Using NextKit

NextKit uses the popular package nodemailer to allow you to send emails.

Normally, you would use a service for sending transactional emails such as SendGrid, Mailjet, MailGun, Postmark, and so on.

These are all valid, and it doesn't really matter what you use. In fact, as long as you provide the SMTP credentials for your service, you shouldn't be needing any other change.

Email Configuration

To add your service's configuration, fill the environment variables in your production environment.

This is best done from your Hosting provider's safe environment variables, or from your CI/CD pipeline.

bashEMAIL_HOST=
EMAIL_PORT=587
EMAIL_USER=
EMAIL_PASSWORD=
EMAIL_SENDER='NextKit Team <info@nextkit.app>'

The details above are provided by the service you're using.

Note: Some email providers don't like the EMAIL_SENDER format. If you're having issues, try using just the email address, such as info@nextkit.app.

When running the emulators, by default, NextKit uses InBucket for sending emails, and not your production service. Read below for more info.

This configuration will only be used for sending emails for inviting team members. For emails related to authentication, you will need to update the configuration in the Supabase Dashboard.

Sending Emails

To send emails, import and use the sendEmail function, such as below:

tsinterface SendEmailParams {
  from: string;
  to: string;
  subject: string;
  text?: string;
  html?: string;
}
 
import { sendEmail } from '~/core/email/send-email';
 
function sendTransactionalEmail() {
  const sender = configuration.email.senderAddress;
 
  return sendEmail({
    to: `youruser@email.com`,
    from: sender,
    subject: `Achievement Unlocked!`,
    html: `Yay, you unlocked an achievement!`,
  });
}

Using react.email to render emails

NextKit's newest versions use react-email to render emails: this is a great library that allows us to write emails using React components.

By default, NextKit's only email is the one sent when inviting members to a NextKit application - but you can leverage this library to write your own emails for your application.

For example, here's the code for the email sent when inviting members:

src/lib/emails/invite.ts

tsinterface Props {
  organizationName: string;
  organizationLogo?: string;
  inviter: Maybe<string>;
  invitedUserEmail: string;
  link: string;
  productName: string;
}
 
export default function renderInviteEmail(props: Props) {
  const title = `You have been invited to join ${props.organizationName}`;
 
  return render(
    <Html>
      <Head>
        <title>{title}</title>
      </Head>
      <Preview>{title}</Preview>
      <Body style={{ width: '500px', margin: '0 auto', font: 'helvetica' }}>
        <EmailNavbar />
        <Section style={{ width: '100%' }}>
          <Column>
            <Text>Hi,</Text>
 
            <Text>
              {props.inviter} with {props.organizationName} has invited you to
              use {props.productName} to collaborate with them.
            </Text>
 
            <Text>
              Use the button below to set up your account and get started:
            </Text>
          </Column>
        </Section>
 
        <Section>
          <Column align="center">
            <CallToActionButton href={props.link}>
              Join {props.organizationName}
            </CallToActionButton>
          </Column>
        </Section>
 
        <Section>
          <Column>
            <Text>Welcome aboard,</Text>
            <Text>The {props.productName} Team</Text>
          </Column>
        </Section>
      </Body>
    </Html>
  );
}

NextKit uses InBucket - a platform to testing emails.

InBucket saves time during development since we can test our emails without setting up a real SMTP service - and works locally and offline.

To run the InBucket platform, we need Docker running on our machine. InBucket runs when the Supabase development environment is started, so you don't need to do anything else.

InBucket will now be running at localhost:54324. When we send an email using the sendEmail function in the kit, we can visualize it using the InBucket UI.

InBucket is used by default during development. Instead, for production usage, you will need to set up a real SMTP service.

Ethereal

In previous versions NextKit used Ethereal. If you are running an older version, please refer to the below.

NextKit used Ethereal to allow you testing your emails without using a real email account. To use Ethereal, you should add the following environment variables to your project, using a secure environment:

devETHEREAL_EMAIL=
ETHEREAL_PASSWORD=

If not set, NextKit will automatically create an account for you on-the-fly and print the credentials in the console. You can then use these credentials to log in to Ethereal and see your emails.

PreviousTranslations & Locales

NextValidating API Payload With Zod