Mails

For mails nextstarter 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:

Plunk
Postmark
Resend
Nodemailer - Use your own SMTP server
Custom provider - Use any other provider you like

Set `from` mail address

Next up, set the from mail address in the packages/mail/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 = {
  from: '[email protected]',
};

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 nextstarter!',
  de: 'Willkommen bei nextstarter!',
};
 
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: '[email protected]',
  template: 'newMail',
  context: {
    name: 'Tim Cook',
  },
});

Supabase Custom