Get NextJet

Email

Learn how to configure the email provider in order to enable email sending in your application.

Configure the Email Provider

I've chosen Resend as the email provider for this project.

While you have the flexibility to use any email provider you prefer, it's highly recommended to stick with Resend for consistency and to save time. If you decide to opt for a different provider, you'll need to adjust the environment variables accordingly and set up the email provider in the project.

Create an account

Create an account and login on Resend.

Get the API key

In the onboarding flow click on the Add API Key button to get the API key.

Update the environment variables

Copy the API key and paste it beside the RESEND_KEY in the .env.

Test the email provider

Send a test email to verify that the email provider is set up correctly.

You can do this by trying out the magic link sign in feature in your application here.

Build an Email

We use React Email. to build our email templates. It's a library that lets you write emails using React and Tailwind CSS.

Here's what React Email offers:

  • Reusable Components: Build emails with pre-built components, ditching the complexity of table-based layouts.
  • Hot Reloading: Preview your email templates in real-time with a live server. Access the server at http://localhost:3333.
  • Tailwind CSS: Use Tailwind CSS to style your emails.

The packages/emails/src/templates folder provides a collection of pre-built email templates to get you started. You can also create your own custom templates within this directory.

Send an Email

To send an email, you can use the sendEmail function from the packages/emails/src/lib/sendEmail.ts file.

import { MagicLinkSignIn, sendEmail } from "@package/email"

await sendEmail({
  email: emailsArray,
  subject: "Buy NextJet Now!",
  react: BuyNextJetEmailTemplate,
})
  • email: The email addresses to which the email is sent.
  • subject: The subject of the email.
  • react: The React component that represents the email template.

Last updated on

Magic Link

Analytics