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

Подписаться 155 тыс.

Просмотров 17 тыс.

50% 1

👉 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

Опубликовано:

14 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 42

@VaurionX 6 месяцев назад

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!

@eniskalyon 9 месяцев назад

Yet another great video Grad, thank you for this. The portfolio tutorial overall was exceptional to say the least.

@heeeyyooou8714 9 месяцев назад

Hey Grad amazing video, btw how do you setup your domain to make it work on localhost?

@damianalcalaylopez7229 Год назад

Hey Grad, thanks for the vid man! Do you know how to attach a pdf or image file to the email?

@John-eq5cd 9 месяцев назад

Very good. A calm and clear explanation.

@appstuff6565 11 месяцев назад

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!

@souravukil4120 Год назад

love your videos, also whats the name of the theme you're using!!

@LutherDePapier 2 месяца назад

Can you try using !important to override the purple color on text?

@jarekwasilewski8891 Год назад

Hello, great video, can i use it with Astro and it has to be on SSR mode?

@pH7Programming 11 месяцев назад

Great video! And very well explained 👌

@mphatsomtogolo6263 6 месяцев назад

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').

@Offiziersmesser 4 месяца назад

You probably forgot to place a 'use server' at the top of your sendEmail.ts file.

@ElijahScott10x 9 месяцев назад

Great tutorial, thanks

@FaisalSaifi 9 месяцев назад

I'm unable to open the attachments sent with Resend, they are getting broken although I tested that the Base64 encoding was just fine.

@eniskalyon 9 месяцев назад

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.

@LutherDePapier 2 месяца назад

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.

@kennycreator4800 Год назад

Hey, must i use Next JS? i am only familiar with React JS. Can i use it with regular React JS

@ByteGrad Год назад

Works outside Next.js too, for sure, but this example shows Server Actions (Next.js feature atm)

@kennycreator4800 Год назад

@@ByteGrad Thank you, so for the quick start i can just follow the Next.Js guide. Your channel is super helpful.

@Turin90 Год назад

Amazing tutorial as usual 🚀. With react.js only does not work, cors error

@nirvanzentinal 11 месяцев назад

also next.js how to handle cors?

@tossivahva 8 месяцев назад

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))

@psyferinc.3573 7 месяцев назад

what did you do for deployment on vercel in order to get the react resend to work

@c4pancake 7 месяцев назад

in vercel you can go to setting > environment variables and input it there

@iliasrais9499 6 месяцев назад

@@c4pancake did it work for you? because i did that and it's not working

@c4pancake 6 месяцев назад

@@iliasrais9499it did at the time, make sure to redeploy

@Jimil_soni 2 месяца назад

But what if I want to send the mail to other email rather than my own email

@aashrith9680 7 месяцев назад

How can I stop someone from spamming through tha contact form using resend ?

@psyferinc.3573 8 месяцев назад

cant thank you enough,

@mikhacavin 11 месяцев назад

can we user node mailer to this server action?

@nidhinlalp5267 8 месяцев назад

will uploading files ? using this resend ?

@KaranSethia24 10 месяцев назад

does it work with plain react?

@jaguar3957 Год назад

How to create a domain in resend ??

@leiyin1998 10 месяцев назад

cool!

@sushantkumar3861 Год назад

How did you verify the "localhost" in resend?

@ghufranullah3161 10 месяцев назад

facing same issue

@StasPonomaryov84 Год назад

hmm. hot working on production (Firebase). error 500

@sumitttpaul 8 месяцев назад

Failed in vercel

@gmancodes 7 месяцев назад

share code?

@alexeyyevkov155 11 месяцев назад

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' ] } };

@frontEndDiv 11 месяцев назад

my GOSH! I could kiss you. this was driving me nuts. thanks a lot.

@juanferrer5885 Год назад

- 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?