Documentation
Next.js
Mails

Mails

For mails supastarter integrates React Email (opens in a new tab) which enables you to write your mails in React.

💡

Why React Email:
It gives you the ability to style your mails with Tailwind CSS just like in your application. Of course the config from your app is reused for your mails. It also gives you the ability to use components in your mails, so you can build a generic template and use it in all your mails.

Providers

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

There are multiple providers available:

Custom provider

You can also use any other provider you like, by creating a new file in the provider folder and implementing the SendEmailHandler interface:

import { config } from '../config';
import { SendEmailHandler } from '../types';
 
const { from } = config;
 
export const send: SendEmailHandler = async ({ to, subject, text, html }) => {
  // handle your custom email sending logic here
};

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.

import { Text } from '@react-email/components';
import Wrapper from './components/Wrapper';
 
export function NewMail({ name }: { name: string }): JSX.Element {
  return (
    <Wrapper>
      <Text>Hello {name}</Text>
    </Wrapper>
  );
}
 
// define the subject for the mail in the locales of your app
NewMail.subjects = {
  en: 'Welcome to supastarter!',
  de: 'Willkommen bei supastarter!',
};
 
export default NewMail;

Check out the offical docs of React Email (opens in a new tab) 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',
  },
});
StripeUI & styling