Create & Send Custom Emails with React Email & Resend

if you've ever handcrafted email templates you know could be a little bit challenging to get right but now using tools like react email we can build all those emails right inside of react and have more confidence of the experience we're delivering to people's inbox we're going to dig into react email and see how we can use it to easily craft our custom templates to be able to send our transactional emails to do this I created a new nexjs application where I created a simple signup form where I have a name and email field that once you click sign up we're just going to send a transactional email as a way to fake it just to see how this works if the UI looks familiar I use Shad CN UI in order to just simply build that form up but inside of the code I'm using the nexjs app directory where I have my components where I have a client component which includes that sign up form that includes those different labels the inputs as well as just some simple submission handling where we're going to be able to send that email once we have it configured now to get started with react email we can either use the automatic setup which will create a new project but I'm going to go ahead and manually set this up as I want to create it inside my existing project now this also kind of depends on how you want to organize your project I want to actually organize Mine by including my emails in the source directory just because that is a little bit more sane in my brain so I'm going to skip down and actually start to install the dependencies so I'm going to copy this line and install it in my project and then we can see the next step is to actually add a Dev command inside of our project which is email Dev so in my package.json I'm going to specify my email which is email Dev and then it gives me a really basic email template that I can include so I'm going to go ahead and copy that and inside of my source directory I'm going to create a new directory called emails and inside I'm going to create my welcome.tsx file and paste in that new template and now we should be able to get started running our Dev command but we need to do one little thing if you're organizing it the way I'm organizing it so I'm going to head over to the CLI where we have the option of passing in a directory flag where I'm going to specify the directory where I include my emails so I have my emails inside of source emails so I'm going to specify directory and then Source emails but now when I run npm run email and if this is your first time running it it's going to install send dependencies additional to help set up the environment but once it's ready we now have a Dev server available where if I open that up inside my browser where now we're in through the preview mode where I can select my email welcome on the side and I see that new welcome email which because I just copied that template all I have right now is Click me which opens that link but we can even start to see the source that built that which is what we copy and pasted from the react email site now if we start to look at that template that we built this is all react and we're pulling in a lot of these components from the react email Library if we look over at the documentation we can see that we have a lot of components that are available to us in order to build a lot of those blocks that are traditionally inside of an email if Tailwind is your thing there's even a Tailwind component that gives you the ability to wrap the email to expose those classes to take advantage of them inside of your email design but I'm not going to get too far into going through all these components what I'm going to actually do is head back up and find the examples where inside of this they provide a bunch of different examples from other templates that you might have seen from some of your favorite Services now the nice thing about this isn't that you can just copy and paste somebody else's template and ship it it's a good way to get started with creating your own template for instance this notion magic link template is pretty simple and for now that's all I want for my welcome email I just want to welcome them something simple so if I look inside the source we can see that I'm pulling in these components from react email components so first of all we'll need to install that top level package or install all the different component packages but first let's copy this template and I'm going to paste that and overwrite all of my welcome email template but now let's go ahead and install react email components now the tricky thing right now is if you try to actually command C or Ctrl C rather and shut down this process you might run into some issues so we'll actually have to just close this tab for now I'm going to go ahead and install my react email components and if I run npm run email again we can see that aside from the static asset my email now looks like that notion email now because this is react I can really start to change this to whatever I want such as how about I just say welcome for the heading I don't need this link so I'm going to get rid of that instead of this text I'm going to say thank you for signing up for the best newsletter in the world rather Galaxy and then I can get rid of some of the other stuff since I don't necessarily need it for my email but once we have it to our liking we can see all those changes inside of our Dev environment we can even change the Styles such as if I wanted to change these footer Styles instead of being a light gray maybe I just once you make it purple or blue violet rather we can see that it grabs those Styles and applies them so we can have as much control over this template it as we might have with our traditional applications now because we're in react you can really componentize this and set this up exactly how you want to make sure you have all your reusable components for building your emails but once we ultimately have our template including any renaming or any kind of cleanup that you need to do welcome to this newsletter we can start to think about how we're actually going to send this email now react email comes with a bunch of different Integrations that we can use but resend is actually the creators of react email and it's pretty nice and simple to use so let's try that out if you haven't heard of resend before it's an easy to use API for sending emails looking at one of its examples that doesn't use react email we can see that once you set it up we really just have this one send method which you specify you're from and two and subject which of course you need but then you have your HTML that you can send you can even send your text-based emails which is important when you're sending it for people who don't accept HTML emails but of course we also have the ability to send those react email templates and once we import it we can pass that in as the react option which it's going to build it we can even pass in our Dynamic parameters to build that template and then we can have that sent out along with everything else so let's get started with that let's first install resend so I'm going to paste that in my terminal we can Skip Along through creating our email template because we already have that but then we ultimately want to be able to send that email so we're going to first import resend into a new location where because we're working inside an xjs we have a few options such as maybe we want to use the new server actions which if you want to check out a video of how to work with those you can check out this link above but how about we just use a traditional API route we're inside of app directory let's create a new folder called API which is going to include our different apis I'm going to then include a new directory called email and then inside of that let's create a new route.ts we're going to start off by exporting a new async function called post we're inside it's going to be where we're going to perform that email send so at the top of this I'm going to import my resend from resend I'm then going to want to configure my resend account and paste that in right at the top now of course we need to replace this with our resend API key or if you don't yet have your resend account you can head over to get started where you can either create using an email or signing up with GitHub but once you're signed in we can head over to the API Keys section where here we have the ability to create and manage our keys so if I click create API key I'm going to be able to call this my react email or whatever you want to make sure that you understand what that is you can set the different permissions where for now it's really just sending or flow access so I'm just going to leave it as is we can even select all the different domains we want which you might not have configured if this is your first time actually creating an account but I'm going to go ahead and click add where now we can see that it generated my new API key and some things to keep in mind is you're only going to see this key once like they say but make sure you do store this safely you don't want to put this inside of your code you don't want to expose this and make it publicly available so you can avoid people actually abusing your API key meaning instead of just going ahead and pasting it right here what we're going to do is instead create an environment variable so inside of the root of our project we're going to create.env.local and then start and inside I'm going to create my resend API key and paste in that key we're inside of my configuration I'm going to now replace that with process.env with my resend API key now back to the react email guide we can see that we now have this resend send email example so I'm going to go ahead and copy this over to my project paste it right inside of this post but we do have a few things that we need to update here first of all we're going to actually pass in our template as a function and first of all we need to actually import that so I'm going to import my welcome email from I'm going to get my source and that's inside of emails welcome I'm going to take that welcome email and I'm just going to pass that in as a function invocation but I'm going to also update the 2 to my email hello at colbyfayock.com we need to make sure that we're actually going to await this send email so that we can make sure that it does actually send but then we want to also make sure that we're actually responding to this endpoint so to do that we're going to import next response from next server and then we're going to return nextresponse dot Json and we're eventually going to pass through our Json response from this email or if we prefer such as the receipt ID of that email but for now let's just pass in an empty object maybe we can just say status okay but we also need a valid from email address in order to properly send this out now as a sneaky way just to test this out if we actually go to the resend docs they have examples that include their resend.dev email address which you don't want to try to use this in a production basis that's not going to end up well for you but since we're just trying to test this out quick before we set up our email let's just copy one of these resend emails and once I plug that in the only other thing is that we currently have this setup as a post request because we're going to be posting Dynamic data so we can't really test this out easily but if I'm going to just template temporarily change this to a get and if I actually hit that endpoint inside of my browser we should quickly see that email gets sent right into our inbox now again you do not want to use resend.dev as your email address for sending these emails that's probably going to get shut down really quickly and this is really just a test that it works but if you head over to your resend account and go over to domains they make it really easy to walk through the process of actually adding a new domain for your recent account but I already have my mail.space jelly.dev setup so I'm going to go ahead and use that where then I can really send it from whatever email address I want so email at mail.space jelly.dev and again let's hit that endpoint just to test that out and we can now see that that came through as Myspace jelly.dev address but let's actually get this working dynamically because I want to send this to my specific customers I don't want to just send a really General welcome email to every single person I want to personalize it such as I want to pass in an object I want to say my first name is Colby or whatever it is so let's switch this back to a post request where we're going to ultimately post that information but inside of my sign up form component I already have my handle on submit set up where I'm going to kick it into a loading State and I just had this set time out here just to kind of simulate somebody clicking that button but what I'm going to want to do is I'm going to await I'm going to a fetch where I'm going to hit that API email just like we did in the browser but I'm going to set up a method of post and I'm going to set up my body I'm going to say json.stringa ringify or I'm going to pass in a first name and let's say Cosmo now because I'm actually making that fetch request I'm going to go ahead and get rid of this set timeout and just make it ready again all this is really doing right now is disabling the button if it's currently loading but to actually make this Dynamic I want to get that Json body from this request so what I can do is pass in a first argument of request to this post request where to make typescript happy we can set that as an instance of request but all I'm going to Simply do is set my data to await request dot Json and I can even go further and I can destructure that first name from that Json I'm going to pass that right into that welcome email now as we can see typescript still isn't happy because we don't technically have that prop set up so just like any other the react component I can now set up my first name prop inside of this component then we can set it up so that as soon as we have that it's going to welcome that first name now again to make typescript happy we can set up our welcome email props where I'm going to set that up as my interface and then my first name is a string now if you notice the red squiggly on the components I think it's just a matter of the cached types or whatever we can see that of course that it's working completely fine now that we actually have our signup form wired up let's pass in our information let's add the name of Cosmo which of course I specified my first name but I'm just going to put the first one in there I'm going to put my email of hello at colbyfayock.com but now I'm going to click sign up and we can see that it's currently loading but we should now see that email pop into our inbox and we even have that Dynamic value for the name but we're still hard coding this value so we can make sure that we actually grab the value from our inputs in addition to the email address to make sure that that's Dynamic and pass that through now to start I want to make sure that I have my name of name and my name of email and I went ahead and pasted some of this code in as I'm not going to try to type all this out with all the type safety inside of this project as it's a bit simpler without the types but I'm going to set this up so that's an HTML form element and on that includes the elements property of the current Target which is allows me to get all the inputs from that so I'm going to make sure that I have all the named inputs I'm going to then collect all that data onto the form data object which I can then reference for my information including passing in myform data.first name as well as my email of formdata.email now if you want to grab that code you can find it in the description inside of this video but now that I'm sending that information I want to make sure that I pass that first name directly through but now that I'm also sending in that email I want to also pass through my email to the to property and just to test that this is working differently I'm going to update my email address to a different email address and Cosmo the space jellyfish I'm going to go ahead and click sign up where I actually don't think I have Hello setup I'm going to change that to Cosmo at spacejelly.dev and click sign up again you can see that email pop in that includes that email of Cosmo spacejelly.dev as well as the cosmo the space jellyfish but as we were able to see this gave us a really easy way to set up our email including setting up the template itself with react and then easily dynamically constructing and sending that from an API route which gives us a powerful way where at least a simple way for being able to send those transactional emails based off of our application actions dealing with email is a necessary evil as it's a powerful way to deliver information to our customers but it's also really tricky to get right what some of your email horror stories let me know in the comments if you wanted to go deeper into some of the new next.js app router capabilities such as those server actions that I talked about check my video where we perform image search using those search actions if you like this video make sure you hit thumbs up subscribe and click that little notification Bell for future web dev content thanks for watching

Channel: Colby Fayock

Views: 53,245

Keywords: react email template, react email template builder, reactjs email send, reactjs email, reactjs email template, react email builder, reactjs send email, reactjs send email without backend, nextjs email, nextjs email sender, nextjs email service, nextjs email send, next js 13 send email, email api, email api react, resend, react email, send email react, send email reactjs, email templates, transactional emails, NextJS, React email components, email development

Id: D4pS4b9-DgA

Length: 14min 33sec (873 seconds)

Published: Wed Jun 14 2023