How to send emails using Next.js App Router and Server Actions

so nex4 is out and there are a lot of improvements to this new version including server actions which are now stable as well as the upgrade to react Canary which is also stable for Frameworks I'm happy to announce that both recent and react email are now compatible with nex1 14 and in this video I'm going to show you how to send an email using the app router and server actions let's get into it okay so the first thing we're going to do is send an email using the app router I already have a project structure here uh with the latest versions of next and react and I also created a API route uh that if I call this endpoint I will just return a Json saying hello world so let's do that let's run this locally and see if that works so I'm going to Local Host 3000 I get the 44 page because I don't have anything that's expected and if I go to SL API send I get my hello world so that's great uh this is all we need to get started I'm going to install the recent package and once I have the recent package I can already start sending emails so I'm going to import this package now and what I'm going to do is just you know create a new instance of that and I'm going to need an API key so I'll put that inside an environment variable um but we need to Define that variable now so let's head over to resent and we're going to navigate to API keys I'm going to create one called next4 and don't worry I'm going to delete this API key right after the video and I'm going to just add a newm file and I'm gonna declare that environment variable so this is all I need to instantiate resent and the the next thing we're going to do is you know just send an email so we have this await resend. emails. send and there are couple parameters that we can use here the from address this can be anything we want I'm I'm going to call it like next at my domain.com I'm G to send this over to my work email the subject okay this is great and the HTML is going to be like H1 hello from nexts and what I'm going to do is I want to return whatever comes out of this which should be an ID of the email that was sent so let's see if this is going to work now okay let's go to that same endpoint and there you go boom the email was sent I got an ID so now I can go to my Gmail and the email is here hello from nextjs and that's great we have an email but how can we make this email better how can we use something that feels more real and email is tricky right like you need to use tables and archaic HTML so that's why we created react email so when you go there there are a lot of examples that you can just you know uh get started with and the one I'm going to use is the let's see the GitHub one so I'm just going to copy this whole thing and all I need to do is create a new folder here called components and I'm just going to paste this whole thing here so there you go uh you'll notice that we have a couple things here one of them is the react email components dependency that we need to install so let's do that and the other thing is this base URL here this is just like the path for the images so let me just make sure this is not going to break by defining the right path here which is basically like this demo app here so we have the base URL we have react email components installed and all I can do is just import that whole email template which is called GitHub access token email and I can now use that template and because recent and react email you know are built by the same team we have like a few nice things you can do like just import like using the react component and I can even you know use the different you know things here like just change the user name uh and pass variables to this component and this is all you know powered by typescript and we can ensure that our types are going to work well here so I'm going to run this now and let's see what happens Boom the email was sent we can go to Gmail and let's see what's going to show up over here there you go here's my email that I just sent and this is using react email behind the scenes and I I can build my whole template using react instead of archaic HTML that's beautiful I love it now let's see how to send an email using server actions if you're not familiar with server actions this is a new paradigm in nextjs which allows you to run server code without having a separate API endpoint that you call from your client you can have both your server code and your client code in the same place so let's see how that works so before you had to create this API endpoint that you would then call it and run this function on the server and that's required because you don't want to leak your recent API key for example so it's really important that this lives on the server and not on the client but things are a little bit different now with server actions let's see how that will work work so I'm going to go ahead and create an index page here for us and inside this page what I'm going to do is just um return a form which will then have a submit button and over here all this is going to do is just send an email once I click this button I wanted to send an email so I'm already running the server Lo locally here and here we go this is how the app looks like I have my send email button right here cool so now what I'm G to do is oh thanks next for creating the layout file already and now I can start adding my server action function I'm going to create a function called send and all this is going to do first is just do a console.log saying hello world and to call this function I'm going to specify it here on my action parameter and to be able to run this function on the server all I have to do is just Define this annotation here called use server so I'm going to run this and let's see what happens I have my next server running and if I click this button here we're not going to see anything on my browser Dev tools because that console.log is not running on the client that's only running on the server and that's why we see it here and that's the beauty of server actions so we can now just you know pretty much copy that same code we wrote before for our email and we can add it here so we can bring all these things here like the recent API key which is private and shouldn't be accessible on the client side we can bring you know our template um which we're going to import here and we can also just import resent and then do a console.log on the response here so if I call this if I submit this form um now what's going to do is it's going to send an email on the server it returned the ID of that email for me and if I go to um Gmail now and here's the email so I hope this was helpful to understand a little bit more about the differences between the app router and server actions and yeah see you next time bye

Channel: Resend

Views: 11,721

Keywords:

Id: UqQxfpTQBaE

Length: 11min 14sec (674 seconds)

Published: Fri Nov 03 2023