New to Vercel. Please help!!
Answered
Yacare Caiman posted this in #help-forum
Yacare CaimanOP
Hi all! This might be a silly question but I'm new to vercel and need help. I am volunteering for an organization and I'm working for a ticket where I have to handle e-mail confirmation (after submitting a form, the user should get an email confirmation). I wanted to do it via EmailJS but the owner of the organization told me that all the emails are handled via Vercel. I have no idea how to proceed given that I just learned about Vercel. What should I ask the engineer? Thanks in advance.
23 Replies
@Yacare Caiman Hi all! This might be a silly question but I'm new to vercel and need help. I am volunteering for an organization and I'm working for a ticket where I have to handle e-mail confirmation (after submitting a form, the user should get an email confirmation). I wanted to do it via EmailJS but the owner of the organization told me that all the emails are handled via Vercel. I have no idea how to proceed given that I just learned about Vercel. What should I ask the engineer? Thanks in advance.
Northeast Congo Lion
you can use api routes in nextjs with vercel.
then set-up code using nodemailer or anytoher mail provider package and write the code to send email.
you'll need to use a mailserver with nodemailer, or something like sendgrid has a npm package available (will need account + api key)
then set-up code using nodemailer or anytoher mail provider package and write the code to send email.
you'll need to use a mailserver with nodemailer, or something like sendgrid has a npm package available (will need account + api key)
can tap into serverless function and have the api route trigger the email
Yacare CaimanOP
Thanks so much for replying, @Northeast Congo Lion ! I don't see the backend code on the repo, I just see the frontend code so I don't know where to create the API routes, should I ask the main engineer about it?
Northeast Congo Lion
if u are not confident with touching the code, yes.
you might have normal form inside react which submits from inside client.
but general approach is to put anything like that inside an api route.
@Yacare Caiman Thanks so much for replying, <@213063998843781120> ! I don't see the backend code on the repo, I just see the frontend code so I don't know where to create the API routes, should I ask the main engineer about it?
Northeast Congo Lion
what nextjs version is it using, also is it app router or pages router?
this is roughly how it would work
src
app
api [folder]
email [folder]
confirm [folder]
route.js
layout.js [file]
...then inside
route.js is where ur logic for nodemailer goesthen inside react form:
const handleSubmit = () => {
//submit ur form, then call below code in callback
...
fetch('/api/email/confirm', {
method: 'POST',
body: {
email: 'email' //whatever fields u need
}
}).then(res => res.json())
.then(data => { //email confirm sent });
.catch(err => { //handle error })
}roughly
Yacare CaimanOP
Thank you! This is the structure of the app:
I don't see the routes in here
Northeast Congo Lion
inside
pages@Yacare Caiman Click to see attachment
Northeast Congo Lion
you are using pages router
Answer
Northeast Congo Lion
if ur stuck, check the docs 🙂
make sure to select the pages router docs at top left
Yacare CaimanOP
I found the routes! Thanks so much!!! I'll read the docs. Thanks a lot!
@Yacare Caiman I found the routes! Thanks so much!!! I'll read the docs. Thanks a lot!
Northeast Congo Lion
sure, mark as solved please and if ur stuck again just open a new issue 🙂
@Yacare Caiman I found the routes! Thanks so much!!! I'll read the docs. Thanks a lot!
Northeast Congo Lion
you can right click the Next.js Forum and mark as solved!
Yacare CaimanOP
I'll do that