How to Send Emails in Next.js

There is one more improvement we can do to our authentication system, and that is the magic link email we send to the user. By default, it looks like this:

Sending custom email using Resend

Again, we are going to use Resend for this job. First, you need to install the resend package, which allows us to send emails programmatically.

1npm install resend

However, there is one small problem here. Because the Resend provider from Auth.js and the resend package we just installed have the same name. To avoid conflict in the program, we'll import the Resend package as ResendClient.

libs/auth.js

1. . .
2
3// The Resend provider from Auth.js, used to integrate Auth.js with Resend
4import Resend from "next-auth/providers/resend";
5
6// The Resend client from Resend, used to send emails
7import { Resend as ResendClient } from "resend";
8
9. . .

And then initialize the Resend client with the same API key we used before:

1. . .
2
3// The Resend provider from Auth.js, used to integrate Auth.js with Resend
4import Resend from "next-auth/providers/resend";
5
6// The Resend client from Resend, used to send emails
7import { Resend as ResendClient } from "resend";
8
9const resend = new ResendClient(process.env.AUTH_RESEND_KEY);
10
11. . .