Overview

For mails supastarter integrates React Email which enables you to write your mails in React.

Providers

In the mail package in your repository you can find the provider folder.

There are multiple providers available:

Set from mail address

Next up, set the from mail address in the config.ts file. 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.

export const config = {
  mailing: {
    from: "example@example.com",
  },
};

Mail templates

In the mail package in your repository you can find the templates folder. In here all your mail templates are located.

To preview your templates while developing you can run the following command in your terminal:

pnpm mail:preview

This will start a local server on port 3005 where you can preview your mails.

If this isn't working for you, try running the following command in the packages/mail/.react-email subfolder:

# run this in packages/mail/.react-email
npm i

Create a mail template

To create a new mail template, simply create a new .tsx in the templates folder that has a default export of a React component.

To use variables, just define them as props of your component.

The translation strings for your mail templates are defined in the packages/i18n/translatinons folder.

import { Link, Text } from "@react-email/components";
import { createTranslator } from "use-intl/core";
import type { BaseMailProps } from "../types";
import PrimaryButton from "./components/PrimaryButton";
import Wrapper from "./components/Wrapper";
 
export function MagicLink({
  url,
  name,
  otp,
  locale,
  translations,
}: {
  url: string;
  name: string;
  otp: string;
} & BaseMailProps): JSX.Element {
  const t = createTranslator({
    locale,
    messages: translations,
    namespace: "mail",
  });
 
  return (
    <Wrapper>
      <Text>{t("magicLink.body", { name })}</Text>
 
      <Text>
        {t("common.otp")}
        <br />
        <strong className="text-2xl font-bold">{otp}</strong>
      </Text>
 
      <Text>{t("common.useLink")}</Text>
 
      <PrimaryButton href={url}>{t("magicLink.login")} &rarr;</PrimaryButton>
 
      <Text className="text-muted-foreground text-sm">
        {t("common.openLinkInBrowser")}
        <Link href={url}>{url}</Link>
      </Text>
    </Wrapper>
  );
}
 
export default MagicLink;

Check out the offical docs of React Email for more information on how to use it and the available components.

Register the mail template

Before you can use your new mail template, you have to register it in the lib/templates.ts file:

import { NewMail } from "../templates/NewMail";
 
export const mailTemplates = {
  //...
  newMail: NewMail,
};

Use the mail template

Now you can send a mail with your template using the sendMail method in your application:

import { sendMail } from "mail";
 
await sendMail({
  to: "tim@apple.com",
  template: "newMail",
  context: {
    name: "Tim Cook",
  },
});

Translations

All mail templates can be translated using the use-intl (the core library of next-intl) package. The translations are defined in the packages/i18n/translations folder.

To use translations in your mail templates, you can use the createTranslator function from use-intl/core.

Each mail template is passed the locale and translations props. The locale is the current locale of the user and the translations are the translations for the current locale.

import { createTranslator } from "use-intl/core";
 
export function MyMailTemplate({
  locale,
  translations,
}: BaseMailProps) {
  const t = createTranslator({
    locale,
    messages: translations,
    namespace: "mail",
  });
 
  return (
    <Wrapper>
      <Text>{t("myMailTemplate.body")}</Text>
    </Wrapper>
  );
}

Per default the sendEmail function will use the default locale you defined in your config.ts.

The API uses the sendEmail function to send various mails like the magic link mail or the password reset mail. In the API we have a locale variable available in the context which will be automatically read from the users locale cookie, so it will match the selected language of the user for each request.

If you want to send a mail in a specific language you can pass the locale prop to the sendEmail function:

await sendEmail({
  to: "example@example.com",
  template: "myMailTemplate",
  locale: "de",
  context: {
    // ...
  },
});