Email Templates in the Next.js Supabase Starter Kit
Learn how to write email templates in the Next.js Supabase Starter Kit with React.Email
Email Templates
Learn how to write email templates in the Next.js Supabase Starter Kit with React.Email
Email templates are a great way to send beautiful and consistent emails to your users. In the Next.js Supabase Starter Kit, we use React.Email to create email templates.
Where to find the email templates
Templates are stored in the package @kit/email-templates
which you can find in the packages/email-templates
directory.
These templates use React.Email to create beautiful-looking email templates.
Example of an email template in the kit
For example, here is our template for accepting an invitation to join a team:
import { Body, Button, Column, Container, Head, Heading, Hr, Html, Img, Link, Preview, Row, Section, Tailwind, Text, render,} from '@react-email/components';interface Props { teamName: string; teamLogo?: string; inviter: string | undefined; invitedUserEmail: string; link: string; productName: string;}export function renderInviteEmail(props: Props) { const previewText = `Join ${props.invitedUserEmail} on ${props.productName}`; return render( <Html> <Head /> <Preview>{previewText}</Preview> <Tailwind> <Body className="mx-auto my-auto bg-gray-50 font-sans"> <Container className="mx-auto my-[40px] w-[465px] rounded-lg border border-solid border-[#eaeaea] bg-white p-[20px]"> <Heading className="mx-0 my-[30px] p-0 text-center text-[24px] font-normal text-black"> Join <strong>{props.teamName}</strong> on{' '} <strong>{props.productName}</strong> </Heading> <Text className="text-[14px] leading-[24px] text-black"> Hello {props.invitedUserEmail}, </Text> <Text className="text-[14px] leading-[24px] text-black"> <strong>{props.inviter}</strong> has invited you to the{' '} <strong>{props.teamName}</strong> team on{' '} <strong>{props.productName}</strong>. </Text> {props.teamLogo && ( <Section> <Row> <Column align="center"> <Img className="rounded-full" src={props.teamLogo} width="64" height="64" /> </Column> </Row> </Section> )} <Section className="mb-[32px] mt-[32px] text-center"> <Button className="rounded bg-[#000000] px-[20px] py-[12px] text-center text-[12px] font-semibold text-white no-underline" href={props.link} > Join {props.teamName} </Button> </Section> <Text className="text-[14px] leading-[24px] text-black"> or copy and paste this URL into your browser:{' '} <Link href={props.link} className="text-blue-600 no-underline"> {props.link} </Link> </Text> <Hr className="mx-0 my-[26px] w-full border border-solid border-[#eaeaea]" /> <Text className="text-[12px] leading-[24px] text-[#666666]"> This invitation was intended for{' '} <span className="text-black">{props.invitedUserEmail}</span>. </Text> </Container> </Body> </Tailwind> </Html>, );}
Creating your own email templates
If you want to create your own email templates, you can create a new file in the packages/email-templates/src/emails
directory and export a function that returns the email template.
Now, export the function from the package.
export * from './emails/example';
Then, import the function and transform the template into HTML that you can send using the mailer.
import { getMailer } from '@kit/mailers';import { renderInviteEmail } from '@kit/email-templates';async function sendEmail() { const emailHtml = renderInviteEmail({ teamName: 'My Team', teamLogo: 'https://example.com/logo.png', inviter: 'John Doe', invitedUserEmail: '' }); const mailer = await getMailer(); return mailer.sendEmail({ to: '', from: '', subject: 'Join the team!', html: emailHtml });}