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

this is a quick video on how you can send emails in react with the react email library and the recent service so we can pass a function here that takes from data as an input we can send that email right we will still keep this and this is async so we're going to make this a ways and async and we'll deal with the errors uh later once we are actually sending the email so let's so now let's actually talk about sending the email right so what we're going to do is we're going to call send email this function here now in here we actually want to send an email right so now we need to use a third party to actually send the email and the third party that we're going to use is called resent and they are actually the same the founders are this is the same team as react email which is a popular library to make your emails look good but this is for styling emails this is for actually sending emails right so let's actually start with just sending it and we'll make it look good later so we do need an account for this right so I have already created an account if you haven't created an account here you can create one here so I'm quickly gonna log in alright so I have logged in and I see this over a few dashboards now what we need is an eight we need the API keys so we're going to install the packages and then we need one of the API Keys now I've already played around with this a little bit so I'm gonna have some more keys here I'm going to create a new API key and you can give that a name I won't give it a name full permission all domains okay I have to actually give it a name tutorial for tutorial for tutorial okay so I have to copy this key and I'm going to paste it here for now be careful with these keys I'm showing it on video I will remove it after recording this is not typically what you want to have in your code base right so what we're going to do is I just copied it here and typically what you want to do with these API Keys is you want to put them in your in environment variable so next.js helps us out here we can very easily create a file here.env.local and here we can we can say this is going to be for recent we can say recent API key and then the actual value here so I'm gonna copy this remove it from here and paste that here right so you don't you don't need quotation marks here in the environment variable file here right also no spaces necessary so we can just write it like this and now this file will not be included when we we will push it to GitHub at some points but if you look at git ignore you can see that it's not it's going to ignore the dozenfeed.local file right so this will not be uh this will not be you know publicly available on GitHub right so make sure you put it in an environment variable it also means that we have to go into for sale when we host it we don't have to put this in the for sale hosting platform as well right but we'll see how that works alright so now we know how to access that API key now we need to actually download the recent package right so I'm gonna open a new terminal here and we're going to say npm install and recent actually has been changing something so here we need a specific version so we're all in the same version so we will say zero point 16.0 so I'm gonna install this okay so now we have the recent package I can close this now we need to import it here so import recent from not types just recent and then we need to instantiate a uh an object here with this recent Constructor so what it looks like is we're just gonna we're just gonna say cons resent and it's going to be an instantiation here the only thing we have to pass here is that environment variable that we just created so to access those variables we can use process.env dot resend API key make sure you have the exact same name as a newer.edu.local file so now we can use this recent variable to send an email so what we can do here for example is we can say resent dot emails dot send and then in here we have to pass an object where do we want to send it to and from where so we can say from now here we are going to send it from the from the recent server or domain right so they actually provide like a default domain that we can use to test make sure you don't spam because you're going to get blocked but they use this reset.dev domain and we can just use that to send an email to us or to anybody actually but you don't want to spam because you're going to get blocked so here we can say where should it be sent to so I will use this I will use my own email address here and this should be your own email address and then the subject of the email we can say subject we can just say a message from contact form and then what we can do is we can say text and we will just have some text hello hello world all right so here let's just keep it like this let's just see if this works right so um we have this form this form is going to invoke This Server action send email which we'll call this funk method here from recent to actually send an email now let's see if that actually works so I still have this text here so I can simply click again and now let's go to your email right if you're using and I can see right if you're using your own email I can see now that I have received an email hello world right so of course as coming from the at recent.dev domain and you can you can connect your own domain it's a bit outside the scope of this project people can actually fill out a contact form it will actually be sent to your email right now of course we are hardcoding hello world here it should be the message right so here let's actually log this but actually assign it to a variable so we can say in the message it's going to be form data Dot and get and then the message right so make sure that this message means the name right so we've given this text area a name right so that's how we access it now and we also have a the sender email right so here the recruiter may leave their own email actually they have to because it's required right it's this field here and we can access that here send our email form data dot get email and so now we don't want to hard code this text here it should just be whatever the message is right so you can say message and now we get an issue because here it says form data entry or null so this message could technically be null according to typescript even though we have specified that it's required but it's coming from this form data.get method right so here we're saying form data entry value or null so this method has just that's how it's typed and typescript is just using that so it's not touch script sometimes not as smart as we think it is so here we can just check it ourselves right so if we have to do some server size validation as well so here we can just check right so if uh if the message doesn't exist if it's null we want to return an error object let's say so we'll we'll just return an object with error in valid message right so the cool thing is whatever we return here from a server action we will be able to access that here so this makes it easier to deal with errors it's basically like an API route right so uh but just without actually creating the the boilerplate for the API okay so now let's see now we know it's not going to be null right so now let's see why is this still not working so now it says form data entry value is not assignable so it needs to be a string or undefined now as the problem here is that this field of the form could also be like a file so form data entry value could also be a file right we know we know it's not going to be a file but technically it's possible right so here we can add some additional validation so we wanted to turn an error on object with an error message if it doesn't exist or if it's like a file right so touchgrip at least is smart enough to know that once we check for this we know after that it's not it's not going to be null right so we just solve the null case now we have to solve the font the the situation where it could be a file type file so here we're just going to check is this message of type string so if time we can use in JavaScript we can say type off message if that is not a string then we also want to return this object with an error message right and we will deal with the error message in here later right but you can see now um that typescript issue is gone right so now once we pass this if block we it's saver now can now we know it's not going to be null it's not going to be anything else but a string so it's actually going to be a string and we actually want to do the same for sender email but we're not using sender email right now so where would we use that well we could actually put that here in the message so we could say something like uh the person who sent this message hasn't emailed this one now what you can also do because in my message it would be nice if you could hit reply and immediately send it to that person right so whatever email they put in here I wouldn't be able to reply and just send the email to them but now it's not possible because it's going to be sent to this recent domain but what you can add here is a reply to field so reply to and that's going to be that sender email right so now we'll see that you can hit reply and it will be actually sending a new email to whatever the email is that the user filled out all right so here we're gonna get the same issue where form data entry or null so what it means is reply to 2 needs to be let's see type no it's not assignable so this needs to be a type of string or an array of strings or undefined right but sender email could potentially be null we know it's not going to be null because we make it required here although technically you know people can circumvent that on the client but you know it's safe enough here to assume it's not going to be null all right now when we do all of this we know it's going to be the correct format so it's not going to be no Etc but touchgrip doesn't pick that up here and so sometimes touchscript just doesn't pick it up and so it still thinks that this could be null so here we can assert basically that we know better than typescript so we can add as string we know it's gonna we know it's going to be a string at this point right so here's for the message as well we can just add a string and basically assert here that it's going to be a string these two right because we are checking it's not going to be null right because then we would return files here and we would return this we wouldn't even get to here so we cannot get here if it's if it doesn't exist if it's no so we know it's not going to be no we also know it's going to be a string because if it's not a string it will return false and we also know it's going to be within that uh it's going to be less than that maximum length so we can be confident enough to assert that these are going to be strings all right so what we're passing now is the text that's going to be the actual message that we fill out in the form and also this reply to email so let's actually double check this so we'll say test at Gmail and I will say hello world actually let's uh give it a different text message now new message so I will just write this and now I'm going to click submit and I'm going to check my email block all right now I didn't receive the email so I waited some time and this is still the old one so I didn't receive it so something went wrong here now if we look here this actually needs to be awaited so we need to put a weight in front of this here make sure you also have this marked as async and then it still won't work and obviously it's because this is not the correct name right very uh yeah sender email is the name here so very silly mistake sender email should be the name as it needs to be the exact name here as what you put in the form right name a sender email right so what we had before was just email but there's no uh there's no form control here with the name email and there's type email but not name emails sender email but this needs to be sender email okay so now all of this should work I'm gonna close here close out of here and now I'm gonna click on submit again and I'm gonna check my inbox and now we get message from contact form blah blah which is indeed the message right if we now click here you can see reply to is test gmail.com so if I now click on reply it will actually send that email to that uh email address that the user filled out right now it's also a bit ugly here this onboarding and actually in the API docs they give you a way to make that look a little bit better so to include a friendly name use the format your name and then with angled brackets so let's do that let's try that so here we can say from um well this needs to be an angled bracket the email and then what we can put here is the actual the more better looking name so here we can use something like contact form let's put it like that all right I'm going to save here and let me just gonna send the same email again to check that submit and let's see I've got another name yeah so now we see contacts contact contact form here so that looks a little bit better I think that's nice you can read about the the docs here there's other ways to customize it and customize things but we have a pretty simple form we don't really need a lot of customization there all right so now we have this functionality it works we can send emails to ourselves but it doesn't look so nice so it's just very plain now and typically in you know professional applications if you deal with emails I'm going to close resends here if you do with emails you want to style them as well so a very popular library for styling emails is react.email you can stop this is a more reactive way basically of styling emails and it Smooths away a lot of issues with stunning emails because you can imagine all these email clients like Gmail and Microsoft email and there are some other uh third-party email clients as well they all have different ways of interpreting the email message and they may have issues with styling and this Smooths away a lot of those issues it just makes it much easier to style emails so here we're gonna it's actually the same people as from the recent the recent service that we just used right so here on the website they have some examples here right so you know you probably see these um emails as a consumer yourself you probably have some services that that have styled their emails right so it makes it very easy to style emails so the reason we're including this here in our application here because technically you know a simple email may be enough but you know if you want to publish your portfolio online and you know some tech lead that's looking to hire you wants to see how you've coded this portfolio well it would be impressive to show that you are also capable of styling an email it's not that difficult but it's just another feature that we can ask here to impress the person that's looking to hire us even more right so let's quickly do that so it actually show you how to do that so if you look at the source of any of these they basically give us a bunch of components and we actually zoom in here a little bit they give us a bunch of components like body is basically like an HTML file your body and HTML and hat and we can even use Tailwind right so then you can just create a react component and we can pass that react component here so instead of passing a text field so plain text instead of doing this I'm going to comment this out what we're going to do is we can actually just pass react and we can actually give a react component and resend will actually uh will actually interpret that properly right so we're going to create the react component now with react email and then we pass it here to resend right so I'm going to comment this out for now so where are we going to create that email so email is also something that typically you want to have a separate folder for so I'm going to create another folder here last one email and in here if you have a bigger application with multiple types of email you can give them a unique name here we'll say contact form email or contact form and let's actually call this email contact form email.tsx RFC contact form email all right so we have this so now we have and we need to get access to these components that react email gives us so we need to install the package so we can say npm install at react email forward slash components and also add react email forward slash Tailwind right because we're going to use Tillman and they even allow that so we can Style with Tillman if you've ever styled uh if you ever try to style emails you know how much of a hassle that can be and this is going to be much easier now Okay so we've installed this I can close the terminal again now what we want to be able to do of course is this email takes in this uh text here this message and we need to Output this here somewhere so this should take in that message and we will call that message and that's just going to be a string right and actually let's do it the way that we've we've been doing it for react components so we'll say contact form email props we'll Define the type up here to type contact form email prompts message is going to be a string okay all right so then we can use those components from the react email Library so we need to import them let's actually import a bunch of them so we need the actual HTML component body and hats as well hat heading HR or like a horizontal line we will also use container which will Center everything preview section and text and this is coming from let's see it doesn't react it doesn't recognize it so we'll say add react email forward slash components and then we're also going to use Tailwind right so we can style it till end but we do have to import the Tillman components here from at react email Tailwind okay so a bit bit of uh setup here okay so then what we can do is it's basically going to look very similar to just like a an HTML file so we're gonna start off with the HTML here and then we have a hat We're not gonna have anything here now the head can hold things like the title for the email but we are already defining that uh with subjects here and if you're not sure what some of these components do they have complete documentation and they also show you the support for all these email clients so outlook for Microsoft Apple email Yahoo email and there are some popular other ones right so it's pretty cool that you can now use this and it will make it look good across all of them much easier than before alright so let's see we'll have head now we have that preview as well this is basically going to be if we look here for preview email clients have this concept of previewed text so that's basically just going to be a short snippet of text and we could use that but I think we are already doing that here with uh right so we'll just quickly add that here as well so preview we can just say new message from your portfolio site and then we're gonna have body now we want to wrap everything in the body in the Tailwind component so we can use the Tailwind classes we will have body and in the body we want to Center everything so they have the container component for that and they have a way of previewing this by the way so we can spin up another server or they will spin up another server and it will open up a new tab where you can preview this but this is going to be quite straightforward so let's uh let's just quickly type this out or you can just copy it from the GitHub repo if you don't want to type it out so it's going to be the section now in here we're going to have the heading for this email heading we can say something like you received the following message from the contact form and then the actual text of this email and that should be the actual message so we're gonna pass the message to this component and that's what we're going to Output here and then we also want to have maybe um I'll maybe we want to have a line and maybe we also want to show the sender email here so this message came from the following email or the the sender's email is the following email so we can have some text here again we can say the sender's email is and then the sender email it will also be in the reply to field right reply to but maybe we also want to make it explicit here in the email itself so it's currently not accepting sender email so we have to add that here right so touchgrip is complaining so sender email will be a string and we have to enter here sender email as well okay okay so now we have our email component my bit of boil plans here make sure you export this now what we can do is when here we can import that we can import this email so I will say contact form email it already suggested for me and now we can do is we can pass that here as as a component oops I can pass this here as a as a jsx component so I can and then we have to pass that as props right so here we can say it needs to get message and send her email so now we can remove this text fields and we can just pass the message right it's going to be message is what we have here message and sender email right message is message send your email is under email all right that's basically what we can do now which is pretty cool now we get an issue here obviously what's the issue and the issue is here we're using jsx in a normal typescript file or you can also see it as jsx using in a DOT JS file you'll get the same issue right so we've we've seen this issue before so the Quick Fix here is to make this a TSX file and so if I do this we are allowed to write jsx in here and actually let's see what we get now there are some subtle differences and ideally if it's not necessary we do we do want to keep dot TS right so we do want to we we don't want to have this become a jsx file just because of this little snippet here so there's an alternative way of writing this and that's actually what react does behind the scenes right we've seen that before so what we can say is react and then we can just say react Dot create element right so instead of writing jsx which is basically just a synonym for what we're doing here with create element so what you can what you can write here is react.createelement now we need to import reacts itself here so here um import react import react from react okay and this is the same as doing this but here we also have two props right so if you want to pass props with create element you just have an object here as the second argument and that's going to be a message or that message is message that we do we do this and here we can we will just do like this a sender email it's going to be it's going to be the sender email so this is equivalent what we're doing here is equivalent to this and so this is the same as this right so when you write um when you write jsx with Section heading and you use these components behind the scenes reactable converter dance to all of these react.create elements right so let's remove this and now let's see what issue we have so we basically have the same issue as before which is that typescript is not able to figure out that this message will always be a string and not something else so we can assert here that this will be a string right and sender email as well as string right so this was a bit of a bit of boilerplate called a bit of a typing if you cut it along so now let's actually see what we get if we send an email so let's go back here and we'll say test at gmail this is a test so now I'm going to send this I'm going to click here and let's see if that works I'm gonna refresh here my email inbox and indeed we can see message from contact form new message from your portfolio site so that's actually what you see here so this preview is what you will see here in the email client new message from your portfolio site and you can see now that it's structured a little bit differently it doesn't look great yet because we haven't added we haven't added our own Tailwind Styles let's do that now and you can see it's already Styles a bit differently now we can actually use typescript Styles that's the last thing we'll do here and so this body let's actually give it like a background color you can style this very similar as um you know playing HTML or a plane or of course just react and it's just react we want the let's see but just change the background color a little bit and then we'll give this section also some styling class name we can give that a styling of BG white and then we want to have that border right so we can actually use our basically our utility that we created ourselves on board and black I will add some margin vertically and some padding horizontally and as well as uh vertically we're gonna add some board radius okay and then you can see this heading there's quite a bit of line highs here right so if the as the text gets bigger typically you want to reduce the line highs so in until when it's called leading so we'll call it leading tight all right so if we save this now and now we have to send an email again so I'm going to click here on submit again gonna refresh my email inbox and now I have another email here let's see if this is titled even better I'm going to open it here and now you can see it Styles a little bit differently now the text for some reason has become purple so I do want to change that and I think it's it's probably something that the email client adds because it can see that this is a duplicate of before so it may uh style it with purple now I'm going to overwrite that hopefully by doing this text black okay so one last time I'm gonna submit and actually maybe we should submit with different text another test blah blah okay so now I'm gonna check submit go to my email inbox and and get my email here let's see what we get all right so it's still purple text and I think it's just because I've been spamming myself and this is what the email clients is doing um we could continue playing around but you I think you get the point here we can style these emails and there's probably a way to override that but it's going to be outside the scope of this project for now right but I think this looks pretty cool and this is much much easier than styling emails before by the way if this was helpful I'd really appreciate it if you could like And subscribe also check out my courses on CSS and JavaScript if you want to take those skills to an advanced level because in there we will build some beautiful real world projects from scratch so you can see how everything fits together and really Master CSS or JavaScript and I will also release other courses soon like react and node.js so if you want to be notified then make sure you are subscribed to the email newsletter you can find the link in the description thanks for watching and I hope to see you soon

Channel: ByteGrad

Views: 9,099

Keywords:

Id: PI-tGsvDoIU

Length: 27min 43sec (1663 seconds)

Published: Sat Jul 15 2023