Sending email in NextJS using Emailjs

hello everybody uh today I will show you how you can add email sending functionality to any nextjs website I'll show you the super simple way of doing it and the fastest way so there are some custom Solutions if you are building something huge that requires a lot of emails to pass uh then you can custom uh Implement your own email server but for some Simple Solutions let's say I'm building a website they need a contact page and some people might send some inquiry emails to the owners so for this simple use cases I believe we don't need to over complicate things so this is a perfect example uh this is my website uh my portfolio website where I have this contact me page where you can uh add your name your email address and send me a message and let me first show you what happens so if I hit send a function is being called and if the function was successful it says your message has been sent successfully now if you go to the inbox in this case my inbox I can see that I have received a message from me and it says hello Muhammad Fel you got a new message from this email and that's it so it is very important someone who is sending an email using this kind of form it's very important to collect their email address otherwise you can't get back to them right because this email was sent via the service that I'm using that service is named email js. so let me show you how to integrate this so this is the website uh email JS uh pretty nice and let me first show you the pricing to understand why I'm using it so if you go to their pricing page you can see that it's free for testing and 200 200 monthly request so on average if your website or from your website uh on average if six people send your email daily six to seven people it will cost you nothing right and it's just $9 up to 2,000 monthly requests so uh in this case it's pretty simple for me not uh 200 users are not sending me email per month unfortunately so uh that's why I'm using this service here uh email JS and let me show you how to integrate it with the code uh let after you come here and if you sign in into the email J you will go into this kind of dashboard right so the first thing you have to do is you have to add a new service uh there are many any Gmail uh many email Provider Services out there so in this case I have integrated my personal Gmail and then you go to this email templates I have added a default template uh didn't spend too much time on it because that's not the point so in this email template several things are important to understand so these are the variables right so here you can see Hello toore name I have added it inside two cly braces I have three variables total two two name name from name and message so two name is basically my name from name is uh whoever is sending the message if you come here you'll see that youve got a new message from this email address so ideally it should have been named from email but whatever you get the point and then another variable which is this message so these are the three variables that you will need later to create the email uh also uh you can add auto reply you can add attachments and things like that I haven't done those fancy settings I kept it pretty simple just to show you so these are the three variables and you can edit it here you can have a playground and everything now the next step after you create your email template you will see that you'll be given some variables right some some service IDs some template IDs and things like that you have to copy those and copy into your own project then you have to install a Library so if you search with images you will see this uh this npm package but don't install it this is not the original one just to show you so this is not the one that we want I just wanted to show you what not to do so if you go into the react implementation you'll see the actual package we want is email j/ browser uh that is this one this emjs SL browser they have an older one which is called emjs so you install this email JS Dash browser so if I come to the project what I'll do is I'll just add ear add email JS browser I have already done it so I'm not doing it again here is a simple uh form for me uh pretty simple component here are some Tailwind codes to just what you see on the screen so basically this form components name email and message and when you hit submit then the magic happens if you come here I have a simple function called send email and uh here I'm checking if I have the email and message or not I mean whoever is sending the email I need that and then you create this variable template parameters so these template parameters are the parameters that we discussed or showed you inside the original template in the dashbo right so this two name from name and message so these are the three variables so it's I'm sending to myself so I have just added two name as Mohammad Fel that's what you saw in this actual email and then the from name and the message those are the three variables then I am initializing email J uh as you can see I'm using the older library but ideally I would be using email/ browser then I get Emil J the instance of email j i call this send function and when I'm calling the send function I am first passing the the service ID then the template ID then the template parameters and then the email JS user ID right so service ID template ID and user ID so these are all the things that you can find in your account and if you go into this uh your profile you can see your private key uh and public key so basically those are the user ID email J user ID that we talking about I'm not going to show that because that's secret uh and that's it this is just simple function call then these are just State variables uh we don't have to worry about that so using just a function you can send or add the email sending functionality to your website or to your client's website uh when you are creating some simple websites simple business websites where you need simple email sending functionality you can use this Library pretty helpful thank you so much for watching today and have a nice day bye

Channel: Mohammad Faisal

Views: 1,685

Keywords:

Id: dWPBWiX1T_s

Length: 6min 59sec (419 seconds)

Published: Mon Jan 22 2024