you are only one person who make this resend email api works for me. I watch so many tutorials and docs but nothing works . But you made it possible. Thanks
Fantastic video, I have a request though : can you cover the topic of websockets in nextjs 13, with a use case like a chat module or a notification module
Does it work as intended when you host it on Vercel? Resend works locally in development for me, however when its being hosted on Vercel my emails aren't sent, neither are they being received. Can you do a tutorial for Resend being used in production.
@@hamedbahram I have added a domain and it all works in local development. Just not on vercel. I even tried the example on resend for serverless functions and i am getting the same result.
@@hamedbahram okay thank you I have a project that requires me to use “use server” in one of the files but when I try building to be able to deploy to cpanel it gives me server actions are not supported with static export. So my question is what is the workaround because I need that file Thanks
@@akinfetemitope8495 Got it. Well server actions are functions that run on the server, so you'd need a server, which means it won't work with static export! you need to deploy to a platform that supports serverless or edge functions.
When I run my project locally, I am able to see it work perfectly, but when I try to deploy it on vercel, I get this error "./app/api/send/route.js Module not found: Can't resolve 'resend' " I even tried running the command: git config core.ignorecase false But I still see the same issue
great video sir it was working in test mode after hosting and registered domain with my site domain with resend after that i am getting error like this Failed to load resource: the server responded with a status of 500 () Uncaught (in promise) Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
Hey man! I really enjoyed your videos. I'm currently looking into implementing multi-tenancy (wildcard subdomains). I've read the Vercel documentation and cloned Steves Tey's platform starter kit, but I'm still having trouble understanding the concepts. Would you be able to create a video on this topic that is more beginner-friendly? I'm particularly interested in learning how to use the new Next.js app route feature.
One query, looking at the contact-form.tsx file, a client component, the function sendEmail, which is imported and is a server action, is called when the form is submitted. From what I have understood server actions or server components shouldn’t work when imported into client components. Can you clarify? Many thanks
Watch this to learn about server actions → ruclips.net/video/sdKFEo6978U/видео.html Watch this to learn about server components → ruclips.net/video/3Dw6D_WuzSE/видео.html
Thank you. I have watched both of these now and feel I understand better. For those who are interested, here are some of the key points I picked up: Server Actions We cannot define a server action inside a client component (I have found I can define a server action in the same client component file with 'use server', but it cannot be put into the client functional component) Server actions can be imported into a client component Server Components All components inside '/app' are server components by default Server components are only rendered on the server Client components are pre-rendered on the server; the html is generated on the server and then hydrated on the client side We cannot import server components into a client component as they would become client components Server components can only be passed into a client component as a prop or as children. We can import client components into server components, for example importing a navbar search field, which requires user input, in a client component into the main navbar server component
Clone my code and compare what you're doing differently. If not in the code it may be that you haven't verified the email from which you're sending the email.
My pleasure! you can use the `attachments ` property on the `send` function like ↓ ``` await resend.emails.send({ from: 'Acme ', to: ['delivered@resend.dev'], subject: 'hello world', text: 'it works!', attachments: [ { filename: 'invoice.pdf', content: invoiceBuffer, }, ], }); ```
@@hamedbahram thank you 🙏… I’ve learnt quite a bit of Js and I’m getting comfortable and now I’m creating my portfolio but when I check next auth Tutorials they all mostly use Ts which is making me debate which to use
@@mayorplaystoo If you're comfortable then use TS. In case of NextAuth, it is not that much difference. I havve a video covering it in JS => ruclips.net/video/Eh3EpwqT4cM/видео.htmlsi=ctwYbul9V3F5XD2d
Another great video Sir ! I have a question, what will be your approach for silencing spam email? As well how do you create an auto response email from the developer side. Thanks and more success.
Thank you. There are different ways to prevent spam, from managed services to bot detection, captcha, etc. As for the auto-response, you can set it up in the server action, like in the video.
How to set some domain to use, i wanna just deploy site on vercel for portfolio. Can i then use this email from documentation or still need to add my domain?
![KSI - Dirty [Official Visualiser]](http://i.ytimg.com/vi/VoDh1h1dPUE/mqdefault.jpg)
you are only one person who make this resend email api works for me. I watch so many tutorials and docs but nothing works . But you made it possible. Thanks
You're welcome. Glad I could help!
Fantastic video, I have a request though : can you cover the topic of websockets in nextjs 13, with a use case like a chat module or a notification module
Absolutely! That's a great suggestion, thanks. I'll definitely cover that in future videos.
Does it work as intended when you host it on Vercel? Resend works locally in development for me, however when its being hosted on Vercel my emails aren't sent, neither are they being received. Can you do a tutorial for Resend being used in production.
Are you using the resend provided email, or have you verified you own domain?
@@hamedbahram I have added a domain and it all works in local development. Just not on vercel. I even tried the example on resend for serverless functions and i am getting the same result.
@@criteria6972 Strange! I tried it on my end and it works fine.
as usual gr8 bro, keep rocking, your hard work will keep this channel exploding
Thanks man!
how do you build the project with "use server"
Can you expand on your question?
@@hamedbahram okay thank you
I have a project that requires me to use “use server” in one of the files but when I try building to be able to deploy to cpanel it gives me server actions are not supported with static export. So my question is what is the workaround because I need that file
Thanks
@@akinfetemitope8495 Got it. Well server actions are functions that run on the server, so you'd need a server, which means it won't work with static export! you need to deploy to a platform that supports serverless or edge functions.
@@hamedbahram okay thanks
When I run my project locally, I am able to see it work perfectly, but when I try to deploy it on vercel, I get this error "./app/api/send/route.js
Module not found: Can't resolve 'resend' " I even tried running the command: git config core.ignorecase false But I still see the same issue
That's weird 🤔 Can you double check if you have `resend` as a dependency in your `package.json` file?
@@hamedbahram Resolved thank you 😊 Your teachings are amazing and very clear, thank you for that as well!
@@durgashreenv8426 My pleasure!
great video sir it was working in test mode after hosting and registered domain with my site domain with resend after that i am getting error like this
Failed to load resource: the server responded with a status of 500 ()
Uncaught (in promise) Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
Run `npm run build` and `npm run start` to serve the production build and see what errors you get locally.
Yes sir did what you said same errors came ,after hosting my page I am getting the above error sir
@@hamedbahram same error sir in that and when i put in hosting i get the above error\
Your tutorials has saved me a lot, thanks🤟.
Glad to hear that!
Very clear, well done.
I appreciate the reminder about how/where server components can be used in client components
Glad it was helpful!
Dear Hamed would you mind explaining about difference of layout and template in NextJS 13 in a video with sample code please?
Absolutely! I'll cover that in future videos.
Hey man! I really enjoyed your videos. I'm currently looking into implementing multi-tenancy (wildcard subdomains). I've read the Vercel documentation and cloned Steves Tey's platform starter kit, but I'm still having trouble understanding the concepts. Would you be able to create a video on this topic that is more beginner-friendly? I'm particularly interested in learning how to use the new Next.js app route feature.
Absolutely! I'll cover that in future videos.
does resend have recaptcha feature? I wanted to prevent too many submits by adding in a recaptcha feature.
You 'd need to implement that in your client-side forms and alternatively also in your backend APIs before hitting resend to send the emails.
Thank you, I was struggling to make it work on my own, but by looking at your code I managed to get it working.
You're welcome! Glad to hear that!
The resend url is not working
Which url do you mean? This one 👉🏼 resend.com ?
@@hamedbahram Its not still working, facing same issue even tho I used it 2 month ago
One query, looking at the contact-form.tsx file, a client component, the function sendEmail, which is imported and is a server action, is called when the form is submitted. From what I have understood server actions or server components shouldn’t work when imported into client components.
Can you clarify?
Many thanks
Watch this to learn about server actions → ruclips.net/video/sdKFEo6978U/видео.html
Watch this to learn about server components → ruclips.net/video/3Dw6D_WuzSE/видео.html
Thank you. I have watched both of these now and feel I understand better.
For those who are interested, here are some of the key points I picked up:
Server Actions
We cannot define a server action inside a client component (I have found I can define a server action in the same client component file with 'use server', but it cannot be put into the client functional component)
Server actions can be imported into a client component
Server Components
All components inside '/app' are server components by default
Server components are only rendered on the server
Client components are pre-rendered on the server; the html is generated on the server and then hydrated on the client side
We cannot import server components into a client component as they would become client components
Server components can only be passed into a client component as a prop or as children.
We can import client components into server components, for example importing a navbar search field, which requires user input, in a client component into the main navbar server component
what would cause the email not to send. read through all the docs. console.log says its working just fine, but I'm not receiving an email :/
Clone my code and compare what you're doing differently. If not in the code it may be that you haven't verified the email from which you're sending the email.
@@hamedbahram it was the email. Thanks!
It’s a fantastic lesson to learn.
Glad to hear that!
Hi thanks for the vid!! Appreciate it a lot!
Also wanted to ask if you know how to add an attachment file like pdf or image to the email.
My pleasure! you can use the `attachments ` property on the `send` function like ↓
```
await resend.emails.send({
from: 'Acme ',
to: ['delivered@resend.dev'],
subject: 'hello world',
text: 'it works!',
attachments: [
{
filename: 'invoice.pdf',
content: invoiceBuffer,
},
],
});
```
❤ I really like the video, thank you so much. Hope to see more.
Glad to hear that!
It’s hard being a new developer and not knowing what to choose Js or Ts?? Pls I need advice ❤❤❤
If you're a new developer, I suggest starting from Js. Once you got comfortable with what you're learning you can sprinkle in Ts.
@@hamedbahram thank you 🙏…
I’ve learnt quite a bit of Js and I’m getting comfortable and now I’m creating my portfolio but when I check next auth Tutorials they all mostly use Ts which is making me debate which to use
@@mayorplaystoo If you're comfortable then use TS. In case of NextAuth, it is not that much difference. I havve a video covering it in JS => ruclips.net/video/Eh3EpwqT4cM/видео.htmlsi=ctwYbul9V3F5XD2d
Like always Top,Top,Top🚀🚀🚀
Appreciate it 🤙
is it possible to receive email from any valid one?
What do you mean by that?
I want to receive emails by visitors of my website.
Another great video Sir ! I have a question, what will be your approach for silencing spam email? As well how do you create an auto response email from the developer side. Thanks and more success.
Thank you. There are different ways to prevent spam, from managed services to bot detection, captcha, etc. As for the auto-response, you can set it up in the server action, like in the video.
Can this be implemented in a React project? Not asking for Next.js
Absolutely!
thank you so much ♥ good video
Thanks. Appreciate it!
How to set some domain to use, i wanna just deploy site on vercel for portfolio. Can i then use this email from documentation or still need to add my domain?
You need to add your own domain.
@@hamedbahram can i make it for free or need to pay to get domain?
@@quizproject-n1k If you want your own domain you have to buy it.
@@hamedbahram Is forbidden to use this default (for test) address domain? Just wanna deploy it on vercel for portfolio website...
isn't it necesary a POST
A server action makes a post request under the hood.