Send Emails in Next.js App With Server Action & React.Email & Resend & TypeScript
Вставка
- Опубліковано 16 жов 2024
- 👉 NEW React & Next.js Course: bytegrad.com/c...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Add authentication to your app FAST: bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/c...
👉 Professional JavaScript Course: bytegrad.com/c...
👉 Professional CSS Course: bytegrad.com/c...
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (BIG update soon): email.bytegrad...
⏱️ Timestamps:
0:00 Explanation
#webdevelopment #coding #programming
This video was incredible. Not only did you teach us Server Actions, but you gave us all the extra goodies to make a really slick contact form. Thanks so much!
Yet another great video Grad, thank you for this. The portfolio tutorial overall was exceptional to say the least.
Hey Grad, thanks for the vid man!
Do you know how to attach a pdf or image file to the email?
Hey Grad amazing video, btw how do you setup your domain to make it work on localhost?
Very good. A calm and clear explanation.
I did everything the same way but Im getting an error: Import trace for requested module:
./node_modules/resend/node_modules/@react-email/render/dist/index.mjs
./node_modules/resend/build/src/resend.js
./node_modules/resend/build/src/index.js
./app/actions/action.ts
./app/(public)/page.tsx
⨯ ./node_modules/resend/node_modules/@react-email/render/dist/index.mjs
Attempted import error: 'renderToReadableStream' is not exported from 'react-dom/server' (imported as 'renderToReadableStream').
You probably forgot to place a 'use server' at the top of your sendEmail.ts file.
love your videos, also whats the name of the theme you're using!!
Can you try using !important to override the purple color on text?
I'm unable to open the attachments sent with Resend, they are getting broken although I tested that the Base64 encoding was just fine.
Great video! And very well explained 👌
Hi there Byte Grad! Thanks for this. What would you recommend : Amazon SES or Resend?
Also, Im using nextjs 13 with supabase where i have to yet implement a reset password where i take in the email and send a "reset password" option to that email address. How would or should I go about this? Thanks in advance!
any ideas on how to implement a file/image upload functionality to this form? would we need any additional tech or library for this? I'm currently trying to achieve this by converting images to base64 on the client side but having too many runtime&rendering errors to deal with this in a proper way.
Hello, great video, can i use it with Astro and it has to be on SSR mode?
Hey, must i use Next JS? i am only familiar with React JS. Can i use it with regular React JS
Works outside Next.js too, for sure, but this example shows Server Actions (Next.js feature atm)
@@ByteGrad Thank you, so for the quick start i can just follow the Next.Js guide. Your channel is super helpful.
what did you do for deployment on vercel in order to get the react resend to work
in vercel you can go to setting > environment variables and input it there
@@c4pancake did it work for you? because i did that and it's not working
@@iliasrais9499it did at the time, make sure to redeploy
But what if I want to send the mail to other email rather than my own email
Great tutorial, thanks
How can I stop someone from spamming through tha contact form using resend ?
Amazing tutorial as usual 🚀. With react.js only does not work, cors error
also next.js how to handle cors?
I'm in a process but faced this error:
"Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported."
and
400 error
Because I pass react element I guess, idk, still googling solution.
tried:
- JSON.parse(JSON.stringify(data))
does it work with plain react?
will uploading files ? using this resend ?
can we user node mailer to this server action?
It's not about TypeScript not being smart, it's about the form data being able to be sent without the form and what would happen to your server if that's the case.
How did you verify the "localhost" in resend?
facing same issue
How to create a domain in resend ??
cant thank you enough,
hmm. hot working on production (Firebase). error 500
cool!
Failed in vercel
share code?
I faced an error styling the email component because next.js (13.4) recognizes react-email/components as client components. I found a solution on the Internet, specify in the next config that these components are server components.
const nextConfig = {
...,
experimental: {
...,
serverComponentsExternalPackages: [
'@react-email/components',
'@react-email/tailwind'
]
}
};
my GOSH! I could kiss you. this was driving me nuts. thanks a lot.
- error AggregateError
at RedirectableRequest.emit (node:events:511:28)
at ClientRequest.emit (node:events:511:28)
at Socket.socketErrorListener (node:_http_client:495:9)
at Socket.emit (node:events:511:28)
why me?