Create & Send Custom Emails with React Email & Resend
Vložit
- čas přidán 13. 06. 2023
- Build custom email templates using React and Typescript and send them using Resend.
We'll walk through setting up React Email in a Next.js project, creating a new React email template, setting up an API route, and using Resend to send the emails.
🧰 Resources
Code: github.com/colbyfayock/my-rea...
Starter: github.com/colbyfayock/demo-e...
Tutorial: spacejelly.dev/posts/how-to-s...
📺 CZcams: czcams.com/users/colbyfayock?sub_c...
🐦 Twitter: / colbyfayock
📹 Twitch: / colbyfayock
✉️ Newsletter: www.colbyfayock.com/newsletter/
🎥 What I Use: www.colbyfayock.com/uses
#colbyfayock #reactjs #email #nextjs #resend #webdevelopment - Věda a technologie
Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news
Love the fast pace. Thank you sir! 🎉
no problem!
Just found your channel the other day. Your videos rock! Super helpful. Keep it up! 😄
thanks Cam! 🙌
Colby, you might not believe it, but I gotta say, out of all the CZcamsrs teaching React, you're hands down the clearest and most concise! Keep doing your thing-I can definitely see you going far!
really appreciate that 🙏
Reminds me of fireship but better
@@xgtwb6473 huge compliment, thank you 🙏
Hey everyone, Resend founder here. It was really nice to watch this video - you crushed it Colby!
Let me know if any of you have questions about Resend or React Email. Happy to answer them here :)
thanks Zeno!! 🙌
When is it likely to receive a stable release?
@zeno_rocha thanks for creating an amazing product. Resend is great! Muita força e sucesso!
hi zeno, just wanted to ask why would anyone choose resend over amazon ses? Genuinely asking. thanks!
I’ve been fighting to pass data into it all day. Thanks so much I’d hug you in real life!
glad ot hear it helped!
Love seeing you use typescript!
im trying! :D
Great tutorial, really appreciate it Colby!
no problem!
I made an awesome email thanks to you!
wonderful! glad to hear this helped :D
Button and Link not found in production, only dev get the click, cursor pointer
Hey Colby, nice video, I've been trying react email and it's awesome, but for some reason I don't have autocomplete in the components props, do you have this issue too?
yeah im actually not seeing it either 🤔 might be worth an issue on their GitHub
Has anyone implemented ReCaptcha with sending emails in NextJs 13
Thank you very much!!!
you're welcome!
thanks for the video exactly what i needed
but how can you access env variables inside reactnail components
hey glad to hear it helped! you may need to use dotenv when using it locally, i haven't tested this yet, but thats a common solution
Thanks for another great tutorial. How can I check anybody's reply of react email? as I don't have mail box.
You can use the reply to field to set an email address that the email provider would open when clicking reply
it was a perfect tutorial! I'm having problems to config resend, i was trying to learn but if i'm right, i only can send a e-mail if I config the domain and the DNS, so i cant practice without paying for a domain. But your tutorial is excelent!
i was trying with a free domain (like vercel)
@@nazinhalira thanks! yeah i wouldnt expect you to be able to configure DNS for vercel subdomains unfortunately. you could probably find really cheap domains for 1 year and cancel before, but that would still require a payment
@colbyfayock Great video! Out of curiosity - if Resend is a paid service after a certain threshold, how would you protect yourself from malicious attempts of ramping up your bills by bots or someone inputing random emails in the form? How difficult would it be to build your own, free alternative to Resend? A tutorial on this would be SUPER COOL
thanks :) starting off with building your own, i believe Resend uses AWS SES under the hood: aws.amazon.com/ses/ - it's certainly within reason to be able to do that, ive worked at companies that have used SES for transactional emails, but it can be a pain. im sure you could even export rendered React Email templates and ship with that if you want. if you're comfortable in AWS environments definitely doable!! i would imagine there are videos out there, but honestly i can't see myself making a tutorial on that at the moment (i still have AWS PTSD, i'm enjoy the front end, but used to get pulled into AWS a lot haha)
as far as ramping up bills, i think that's a separate challenge and one you'd face with any solution. its a tough one, there are a bunch of solutions including Google's ReCAPTCHA www.google.com/recaptcha/about/ - only some people dont like using Google, but there's a lot of other alternatives these days you can google around for
Hi there Colby, I wanted to ask if you would recommend Amazon Ses vs Resend. What do you recommend? Also, i need to implement a forgot password / recover password page where i take in the user email and send a "reset password" email to that email, if it exists. I wanted to ask how would you go about implementing it? Im using nextjs 13 (app router) with Supabase. Currently using supabase smtp but going to go custom since supabase smtp is not production ready. Thanks for your time and clearing my doubts in advance! :D
Hey, Amazon SES vs Resend is really a matter of paying for the wrapper that Resend adds to what I believe is SES that they use themselves. from past experience SES is a pain where Resend is really easy to use. if your budget supports it, it definitely would make your developer experience better. have to consider the tradeoffs between the work of building an SES solution and all the thigns that go along with it manually
as far as a forgot/recover password page, i'm not familiar with how supabase works, but typically you would build a page in your app where when submitting their email address, you use an API to trigger the password recovery process
not straightforward answers but hope it helps
yes thanks!@@colbyfayock
Hey Colby, thanks for the vid man!
Do you know how to attach a pdf or image file to the email?
looks like the `attachments` key when sending the email through Resend: resend.com/docs/api-reference/emails/send-email
Hi, great video, but one question. I'm trying to send emails to different email accounts, but it only allows me to send emails to the account I signed up with for Resend. Is a change required to send emails from production to any email account?
you need to use your own verified domain, not the @resend address, which is only for testing
In this video you just create api endpoint in nextJS, but little bit confused my app totally front-end based no any backend for now i use emailJs to send emails can we used resend on client side without creating api endpoint just create function on clients and called that function on submit it will be worked?
i dont think you can do that with Resend, reason being, you would want some kind of security measure around calling that endpoint in order to make sure someone isn't abusing it
if you're submitting a form clientside directly to the API, someone can see that API request in the network logs along with the API key that you're sending and spam it
while creating an endpoint that wraps the Resend request doesnt outright prevent that if you're submitting it clientside, you're at least not sharing the keys alongside of it, and in Next.js, you're also avoiding cross origin requests, thoguh you'd still likely want more security and spam prevent measures around that experience
Thanks for this Colby.
What is the name of your theme?
No problem! Night Owl marketplace.visualstudio.com/items?itemName=sdras.night-owl
You don't really have to install the entire react-email app on every project. What I did was simply create a standalone implementation that I could use to understand how to design the templates, and later in my actual project I just install all the dependencies for the templates (Section, Text, and so on) along with resend (or the render function, if I needed a different email provider).
oh nice good to know. from what i can tell the react-email package though provides the dev mode, so i guess does that mean you're not using their built in previewer? might be a naive concern, but i would expect there's more to that preview page than just a simple dump of components, since email html/css is more strict. unsure though
thank you !
you're welcome!
Question why are the changes not reflecting in the UI after updating the code ?
hey what timestamp are you referring to? im not quite sure what you mean
I am trying to send email using resend in node js, but getting unable to verify leaf signature error even though I configured ssl certificates using openssl and also tried switching to https but not getting any changes. Please help 😢
not sure about that one :( id try reaching out to their support
ok but how do i deploy it do i send the node_modules in the react-email-starter im stuck
my understanding is it would work like any other deployed dependency from within the serverless function - the build and deploy step is managed by the provider, say for instance you're deploying on vercel, as long as the react-email dependency is pulled in along with Resend, it would bundle that up and handle the processing of the email
are you experiencing something different?
Hi sir How to fix the issue curtently i am using next13.4 and i have installed the dependencies but when i run yarn dev for email dev script it only create .react-email-tempo folder and it gives me error . how to fix it sir?
hey not sure about that, i would recommend seeing if there's an existing issue on the React Email repository and if not ,creating one github.com/resendlabs/react-email
how to attach dynamic pdf file like booking receipt?
you may need to generate the PDF then get it's contents to attach to the email. see attachments: resend.com/docs/api-reference/emails/send-email
how long does it take for a domain to be verified ?
it usually happens very quickly, but that depends on your domain provider. Resend will be able to read your domain's DNS entries basically right away, but your provider needs to propagate them which i believe could take up to 48 hrs iirc. Mine just took a few moments
How can i use it with react-remix app?
never used remix, but here are two resources you can check out: resend.com/docs/send-with-remix github.com/resend/resend-remix-example
Hi, nice tutoril! thanks!
I made a form that need to send a fild and i don´t know how to do it. Can you share same info to do that :)
this tutorial might help: czcams.com/video/8uChP5ivQ1Q/video.html
doesn't cover it exactly, but through the process of adding / selecting a file, you would want to upload it somewhere instead of on submit, so then once the file is submitted, you can send the URL
I made a project including resend and react email and I can send only email to myself?so is this error or their policy?
hey that sounds like you might be trying to use the Resend email for the `from` address, which you're not able to use. thats simply for testing purposes. you need to configure your own domain to send emails to other people resend.com/docs/dashboard/domains/introduction
@@colbyfayock so can I submit it as a project if I don't have any domain?
@@colbyfayock please reply
@@wellbell23 can you elaborate about what you mean about submitting as a project? i dont believe Resend provides free domains in any way, so typically you'll need a real domain to set this up. a good place to get domains is Porkbun where you can find some inexpensive options: porkbun.com/
I couldn't change the from and to address. It's not working when I change them.
can you share the code? here's what mine looked like: github.com/colbyfayock/my-react-email/blob/main/src/app/api/email/route.ts#L13
@@colbyfayock ah..i just cloned ur code and added my api key. it failed.
{
"statusCode": 422,
"name": "missing_required_field",
"message": "Missing `from` field"
}
Hi, i get the "404 This page could not be found." error, when i try to call it from browser with GET method. I do the same things like you. I can see the template but cannot overcome this error. Any idea?
hey have you checked out my code? github.com/colbyfayock/my-react-email
its also worth noting i believe they launched a big update, its quite possible something changed as i havent updated to that yet
@@colbyfayock Yes i checked. The versions are higher now and i think structure was also changed. I am searching for solutions.
1st thing you need to check is if you're running both your dev and email via the npm run on terminal. - after opening your project, manually enter the "/api/email" (or the place where you set your route) to run the GET method to get result.
IF you're not getting the email, even though you're getting the correct status msg, make sure you're inserting the email you're using via the resend website where you got your API from.
Cool, thx.
np!
bro is better than docs !
thanks 😁
dont we need email templates in table an rows instead of div??
hey can you elaborate on what you mean?
i got it i just want to ask how to make this email template responsive in inline css like media queries or something
@@colbyfayock
why can't I find the code you didn't bother writting for the video in your repo? the one with "isInputNamedElement".
hey what timestamp are you referring to in the video?
@@colbyfayock Hey, thanks for the reply.
At 12:39 you just pasted it in but didn't thoroughly disect it.
What I'm trying to do is have a single click send out two notifications. ONE for my email saying "hey, on your website, {firstName} from {email} sent a meeting request", and another sent to the user that inserted those fields that says: "hey {firstName}. We've notified the team and they'll reach out to you shortly.
how could I make that possible? - it seems the way you did this unfortunately forces the use of only ONE domain to be delivered.
@@mateusloubach ultimately you would need to invoke resend twice - one with each set of data you're looking for, which you would do in the API endpoint. if you need both of those pieces to be dynamic, you need to set up additional properties to be configured and passed through to the endpoint, otherwise you can statically define the 2nd set in the API endpoint
pseudo code
body: JSON.stringify({ userEmail, businessEmail })
...
await resend({ email: userEmail })
await resend({ email: businessEmail })
Do I need a backend for this?
you'll need a server-like environment but that can be a serverless function, so just depends on what you mean by backend
@@colbyfayock To echo this previous comment, I am currently trying to implement this functionality within a VITE react app and receive a CORS error when attempting to send the email. I wanted to avoid building backend as its a very small application but the Resend docs on CORS state that emails should be sent from the server side only. Is this then only achievable within NEXT due to its use of SSR?
@@matthewhammond4918 Next.js isn't the only option and you can choose a solution that doesn't include moving to a framework that supports API endpoints. You can manually create API routes that are framework agnostic in both Vercel and Netlify for instance. You can also create your API route using a cloud provider like AWS using their API Gateway and Lambda, or even a server environment if preferred. there's also api frameworks like Hono and Express, where which can be deployed to a variety of locations (see the sidebar here hono.dev/getting-started/basic)
this would probably make for a good video!
thankyou
you're welcome!
how to use dynamic data from api in this
you would pass it in to the component as shown around 10:00
I mean I have an API to view posts in the email
I have statically generated the data in a variable how to fetch data from an API in the email component or do I need to fetch that data somewhere else?
@@ArysOakheart-qz2wb you can't fetch data from within an email, emails are statically delivered, so you would need to fetch any information before the email is generated, passing it as a prop to the email component
can you please provide some example
@@colbyfayock
can you please provide some example i have a task of testing emails from dynamic data through api@@colbyfayock
Vercel domain is not verifying😢
hey are you referring to a [name].vercel.app domain? i wouldnt expect you do be able to send emails from a vercel subdomain like that. if you're referring to a primary domain that you added through vercel, that _should_ work, though it may take up to 48 hours i believe (doesnt usually take that long). what error are you seeing?
We don't allow public domain,please use your domain instead
@@Anurag_Badwahe whats the domain you're trying to verify?
feedonymous-vercel-app/
I replaced . With - ,because if i provide a link yt will.delete it
Really need help
Colby everything is perfect only for people who does not speak English well (like me) could you speak a little bit slower :)
yeah i get excited and have a habit of speaking quickly. thanks for the feedback! in the meantime maybe slowing it down with the player controls could help?
why am i getting this error: ./node_modules/@react-email/render/dist/index.mjs
Attempted import error: 'convert' is not exported from 'html-to-text' (imported as 'convert2').
not sure... i would recommend looking around on the React Email github and if not finding anything make an Issue github.com/resendlabs/react-email
why mine error {
name: 'invalid_to_address',
source: 'server',
message: 'You can only send testing emails to your own email address (my email).'
}
are you trying to use the resend email address? it's likely the case that they're only allowing you to test that email address sending to your own email so people dont abuse it. otherwise you need to set up your own email domain in your resend account