Email

Setup

To get started with email integration, you'll need to configure your email provider. Follow these steps:

1. Choose an email provider (e.g., SendGrid, Resend, etc.) and create an account.
2. Obtain your API keys and any other necessary credentials.
3. Configure your email provider settings in your application.

These values should be stored in the following environment variables:

# Email
NEXT_PUBLIC_SUPPORT_EMAIL=
SENDGRID_FROM_EMAIL=
SENDGRID_API_KEY=
RESEND_API_KEY=

If you choose Resend the implementation will be slightly different. The main implementation you'll find inside app/api/webhook/stripe/route.ts and there's a specific endpoint for sending emails under app/api/mail/route.ts. Here's an example:

import { Resend } from "resend";

const resend = new Resend(process.env.RESEND_API_KEY);

await resend.emails.send({
    from: `BuilderHack <${process.env.NEXT_PUBLIC_SUPPORT_EMAIL}>`,
    to: resultObj.customer_details?.email,
    subject: 'Welcome to BuilderHack!',
    html: await render(WelcomeTemplate({ userFirstname: name, sessionId: resultObj.id, plan: plan, invoiceUrl: invoiceUrl || '' }))
});

if you pick SendGrid instead:

import * as sgMail from '@sendgrid/mail';

sgMail.setApiKey(process.env.SENDGRID_API_KEY as string);

const msg = {
    to: resultObj.customer_details?.email,
    from: process.env.SENDGRID_FROM_EMAIL || 'yoursupport@email.com',
    subject: 'Welcome to BuilderHack!',
    text: 'Welcome to BuilderHack!',
    html: await render(WelcomeTemplate({ userFirstname: name, sessionId: resultObj.id, plan: plan, invoiceUrl: '' })),
};

// Send the email
await sgMail.send(msg);

Both SendGrid and Resend offer powerful email delivery solutions, so you can choose the one that best fits your needs. They're also very easy to set up. All you need to do is to get your API keys and place them in your environment variables.

Something to be noted here is that for Resend you can also nice templates for your emails. In this boilerplate you already have a basic email template example implemented using @react-email (e.g. WelcomeTemplate). It's a nice way to format your email. Please go check it out under emails/ folder.

@react-email has a very good feature which allows you to use React components to build your email templates, making it easier to maintain and style your emails. By running yarn email and opening http://localhost:3000/ you can see how it looks like. This is very cool!

And that's it! You should now be able to send emails from your application.