Sending Emails in Next.js App With Server Action & React.Email & Resend & TypeScript

Next.js is a popular framework for building server-side rendered and static web applications with React. One common use case for Next.js applications is sending emails, whether it’s for user verification, password reset, or any other notification.

In this article, we will explore how to send emails in a Next.js app using a server-side action, React.Email library, and TypeScript. We will also implement an option to resend the email if needed.

Setting up the Server-Side Action

In order to send emails from a Next.js app, you will need a server-side action that handles the email sending logic. This action can be a serverless function, an API route, or any other server-side endpoint that can send emails.

For example, you can create a serverless function in a directory like `pages/api/sendEmail.ts` and use a library like `nodemailer` to send the email. Here’s a basic example of how the server-side action might look:

“`typescript
// sendEmail.ts
import nodemailer from ‘nodemailer’;

export default async function sendEmail(req, res) {
const { to, subject, body } = req.body;

const transporter = nodemailer.createTransport({
// configure your email provider here
});

try {
await transporter.sendMail({
from: ‘your-email@example.com’,
to,
subject,
text: body
});
res.status(200).json({ success: true });
} catch (error) {
res.status(500).json({ error: error.message });
}
}
“`

Using React.Email for Email Composition

React.Email is a powerful library for composing and sending emails in React applications. It provides a simple and intuitive way to construct HTML and text-based emails, as well as sending them from the client-side.

In your Next.js app, you can use React.Email to construct the email content and send it to the server-side action for sending. Here’s an example of how you might use React.Email in your Next.js app:

“`tsx
import { Email, EmailContext, EmailProvider, useEmail } from ‘react-email’;

export default function ComposeEmail() {
const { sendEmail } = useEmail();

const handleSendEmail = async () => {
const emailContent = {
to: ‘recipient@example.com’,
subject: ‘Hello, World!’,
body: ‘

This is the email content.

‘
};
await sendEmail(‘http://localhost:3000/api/sendEmail’, emailContent);
}

return (
<>

Compose Email

Send Email



);
}
“`

Adding a Resend Option

It’s often useful to provide users with an option to resend an email if they didn’t receive it or if they need a new copy. You can add a “Resend” button to your application that triggers the email sending logic again.

Here’s an example of how you might implement a “Resend” button in your Next.js app using React.Email:

“`tsx
import { Email, useEmail } from ‘react-email’;

export default function ResendEmail() {
const { sendEmail } = useEmail();

const handleResendEmail = async () => {
const emailContent = {
to: ‘recipient@example.com’,
subject: ‘Hello, World!’,
body: ‘

This is the email content.

‘
};
await sendEmail(‘http://localhost:3000/api/sendEmail’, emailContent);
}

return (
<>

Resend Email

Resend Email

);
}
“`

Conclusion

Sending emails in a Next.js app with server-side action, React.Email, and TypeScript is a powerful and versatile feature that can be used for a wide variety of use cases. By following the examples and guidelines in this article, you can easily integrate email sending and resending functionality into your Next.js application.