Nextbase comes with Resend and React Email configured. This makes creating/modifying email templates and sending them to your customers very easy.
Resend serves as the backbone for handling email delivery in Nextbase.
It streamlines the process of sending emails, managing templates, and handling various aspects of email communication.
With Resend, you can focus on creating compelling content, knowing that the delivery mechanism is robust and reliable.
You can use a different email service provider if you want to.
How to use Resend in Next.js?
Resend is usually configured like this in Next.js.
Install resend as a dependency and then import it into your application.
react-email is a React library that allows you to compose email templates using familiar React components. Instead of dealing with complex HTML templates, you can leverage the power of React to create modular and dynamic email content. This integration aligns with the React philosophy, making it intuitive for developers already familiar with React development.
Nextbase provides a seamless integration of Resend and react-email so that you can harness the benefits of both tools effortlessly.
Nextbase comes with the emails folder configured as the repository for your React Email components. You can write your emails here and also preview them with the email development server by running yarn email-dev.
React Email Development Server
In Nextbase, a React Email development server is set up to streamline the process of writing and previewing emails. This development server allows developers to interactively design and visualize emails in a browser, facilitating a more efficient email template creation workflow.
The React Email development server is typically configured as a script in the package.json file. The script is named "email:dev":
To start the React Email development server, developers can run the following command in the terminal:
This starts the React Email development server and provides a convenient way to preview email templates.
Each file in the emails folder corresponds to a specific type of email, and it contains a React component responsible for rendering the content of that email.
We can then send the emails using Resend. Here are some emails we already have in the emails folder:
In this example, the WelcomeEmail component represents the content of a welcome email. This declarative approach simplifies the process of creating and maintaining various email templates in your application.
This is the organization invitation email template. When a user is invited to join an organization, this email is sent to them.
The email is then sent like this.
(Optional) Configure Resend with Supabase SMTP Server
It is recommended to use a third-party SMTP service for production environments in Supabase.
Reliability: Supabase built-in SMTP server is severely rate limited. It is only suitable for development and testing purposes. Supabase recommends using a third-party SMTP service for production environments. Resend provides a robust and reliable email delivery mechanism.
Observability: Resend provides a dashboard to monitor email delivery and other metrics.
In a production environment, it's crucial to ensure reliable email delivery. Ensure that Resend or another third-party SMTP service is configured in your Supabase project.
React Email and Resend Integration in Nextbase
See src/utils/api-routes/utils.ts for an example of how to we use Resend in Nextbase.
Here the sendEmail function is used to send emails using Resend. It receives the email options as an argument and sends the email using Resend.
You only require the API key to configure Resend. You can find the API key in the Resend dashboard.