Sending Email in React using Resend
Reminder that using Resend requires a custom domain. Free tier allows you to add one custom domain.
Once you're in Resend Dashboard, follow these steps shown in the images below. Be wary of the warning when the API Key has been generated. Save it on your notes, otherwise, you'll have to generate another API Key if you need it again.
In your project, save the API Key in your env.local file. If you don't have an env.local file yet, you can just create one. This is how it will look like. You can retrieve this anywhere in your project using the process.env.<ENV VARIABLE> format.
Install resend, npm install resendI'll be using the 'Send Resume' form from my portfolio website as an example.
The form is for sending my resume to interested recruiters or employers. It has only one input for email. The resume attachment is locally saved in the project in the public/ folder.
I have google recaptcha enabled for this form but I will be stripping that off for now, and probably do another article about it.
In the form action, pass the method that handles the calling of the send api. Here is the sendResume method.
The formData props is what gets passed from the form action. You can get the value of the form input using the formData.get("nameOfInput") method.
Since I'm already using NextJs 14, I've created the api endpoint using the api/ folder, and the endpoint method is going to be a POST.
Based on the code snippet from the image:
Line 1 is a Node import for getting file from the public folder. Line 2 is for encoding the file to base64 since that's the required format for an attachment. Line 3 is just importing Resend. Line 4 creates a Resend instance using the API Key that was generated earlier.
Lines 12 to 23 is the format on how to send your email using Resend. The custom domain is placed in the from key. If you still don't have a custom domain, you can you use Resend's resend.dev domain. This domain is only allowed in the development environment. Using it in prod may suspend your account.
From here, you can check the response data and can return it or however you want to use it.