Next js static site api route is working on local but not in production

Hello all, am trying to deploy a simple next.js static site with one API route,
so, the issue is that, when i’m running the site on local , the API route is working great, but when i have deployed it on the server, generally the site is working but when i request the API route it doesn’t work , and the other thing is that it doesn’t return any error.
so, here is the API request and the API :

in /components/ContactUS.jsx there is a method called sendEmail() that accepts form data and sends request to the specified route :

 const sendEmail = async (e) => {
    e.preventDefault()
    const emailObj = {
      email: e.target.user_email.value,
      name: e.target.user_name.value,
      message: e.target.user_message.value,
    };
    await axios
      .post(`https://dev-alas.onrender.com/api/email`, { emailObj })
      .then((res) => {
        console.log(res);
        setAlert(successAlert);
      })
      .catch((e) => {
        console.log(e);
        setAlert(errorAlert);
      });
      document.getElementById("contactForm").reset();
    };

and in /pages/api there is an email API that accepts the request and send the email with ‘emailjs’ :

import { SMTPClient } from "emailjs";
import NextCors from "nextjs-cors";

export default async function handler(req, res) {
  console.log("now in email and above the cors!");
  await NextCors(req, res, {
    // Options
    methods: ['GET', 'HEAD', 'PUT', 'PATCH', 'POST', 'DELETE'],
    origin: '*',
    optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
 });
  const { name, email, message } = req.body.emailObj;
  // console.log(process.env)

  const client = new SMTPClient({
    user: process.env.NEXT_SMTP_USER,
    password: process.env.NEXT_SMTP_KEY,
    host: "smtp.gmail.com",
    ssl: true,
  });

  try {
    console.log("sending email now!");
    await client.send({
      text:
        `Hello Alas, \n\n` +
        `This is ${name}!  \n\n` +
        `message:  \n` +
        `${message}
        `,
      from: "My Portal",
      to: process.env.NEXT_SMTP_USER,
      subject: "New Message From Portal",
      //   html: render(EmailTemplate()),
    });
    await client.send({
      text: `Hello ${name},\n \n`+
      `Thanks for contacting me!  \n`+

      `This automatic reply is just to let you know that \n `+
      
      `i have received your message and w'll get back to you \n `+
      
      `with a response as quickly as possible. \n\n\n`+
      

      `Regards,\n`+
      `Dev Alas.
      `,
      from: "Mohamed Abdirahman",
      to: email,
      subject: "Thanks for contact!",
      //   html: render(EmailTemplate()),
    });
  } catch (e) {
    // res.status(400).end(JSON.stringify({ message: "Error" }));
    return;
  }

  res.status(200).end(JSON.stringify({ message: "Send Mail" }));
}

That’s it, the overall site performance is great on local, but the emailing api not working in production.

Thank you all.

Hey,

To send emails on Render, using SMTP and ports such as 25, 587, 465 is not possible due to the blocking of outgoing ports by our infrastructure provider. Instead, we recommend using something like Sendgrid API (or any other provider) to send emails on Render.

Regards.
Jérémy, Render Support

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.