Next.js Discord

Discord Forum

I get failed to send mail error 500

Answered
Rhinelander posted this in #help-forum
Open in Discord
RhinelanderOP
I am using nodemailer to send data from the form. In my /app/api/sendEmail/route.js is this code
import { NextResponse } from "next/server"
import nodemailer from "nodemailer"

export async function POST(request) {
  try {
    const { name, email, phone, message } = await request.json()

    const transporter = nodemailer.createTransport({
      service: "zoho",
      host: "smtp.zoho.in",
      port: 465,
      secure: true,
      auth: {
        user: process.env.NEXT_PUBLIC_AUTH_EMAIL,
        password: process.env.NEXT_PUBLIC_AUTH_PASSWORD,
      },
    })

    const mailOption = {
      from: process.env.NEXT_PUBLIC_AUTH_EMAIL,
      to: process.env.NEXT_PUBLIC_EMAIL_RECIVER,
      subject: "Wonderland support",
      html: `
      <h3>Helllo there</h3>
      <li>Name: ${name}</li>
      <li>Email: ${email}</li>
      <li>Phone: ${phone}</li>
      <li>Message: ${message}</li>
      `,
    }

    await transporter.sendMail(mailOption)

    return NextResponse.json(
      { message: "Email Send Successfully" },
      { status: 200 }
    )
  } catch (error) {
    return NextResponse.json(
      { message: "Failed to send mail" },
      { status: 500 }
    )
  }
}
Answered by Rhinelander
const transporter = nodemailer.createTransport({
host: "smtp.gmail.com",
port: 587,
secure: false,
auth: {
user: process.env.NEXT_PUBLIC_AUTH_EMAIL,
pass: process.env.NEXT_PUBLIC_GOOGLE_APP_KEY,
},
})
View full answer

22 Replies

RhinelanderOP
I call that in my form component like that
const [name, setName] = useState("")
  const [email, setEmail] = useState("")
  const [phone, setPhone] = useState("")
  const [message, setMessage] = useState("")

  const sendMail = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    try {
      const response = await fetch("/api/sendEmail", {
        method: "POST",
        headers: {
          "content-type": "application/json",
        },
        body: JSON.stringify({
          name,
          email,
          phone,
          message,
        }),
      })

      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`)
      }

      console.log(await response.json())
    } catch (error) {
      console.error("Error sending email:", error)
    }
  }
to my inputs i added
       name="phone"
          value={phone}
          onChange={(e) => {
            setPhone(e.target.value)
          }}
This is phone example it same for other just diffrent name
I would appreciate any help
RhinelanderOP
Apparently Username and Password not accepted. Even though that I copy pasted them in to google and logged in with no problem... I was just reading similar issues and found out that I should have less secure login enabled... but I can't turn it on as it is disabled (depreciated option)
RhinelanderOP
I get this
oh you changed to google
create a app password in your google account
RhinelanderOP
const transporter = nodemailer.createTransport({
host: "smtp.gmail.com",
port: 587,
secure: false,
auth: {
user: process.env.NEXT_PUBLIC_AUTH_EMAIL,
pass: process.env.NEXT_PUBLIC_GOOGLE_APP_KEY,
},
})
Answer
RhinelanderOP
Thank you. It works!
Any idea what would the best way to style my mail be?
This part
@Rhinelander const transporter = nodemailer.createTransport({ host: "smtp.gmail.com", port: 587, secure: false, auth: { user: process.env.NEXT_PUBLIC_AUTH_EMAIL, pass: process.env.NEXT_PUBLIC_GOOGLE_APP_KEY, }, })
consider change the env to AUTH_EMAIL and GOOGLE_APP_KEY because it will get bundled to client side javascript if its start with NEXT_PUBLIC prefix
RhinelanderOP
but then i get error
@Rhinelander but then i get error
what error?
@Rhinelander This part
@Ray what error?
RhinelanderOP
I got it before but not now i must made mistake back then... maybe misspelled
RhinelanderOP
Thank you a lot btw!
np