Next.js Forms Work Locally but Fail on cPanel Deployment

Question

If both forms in my Next.js application are functioning properly with Nodemailer locally, but upon deployment to cPanel, I encounter an "Internal Server Error" when attempting to submit the forms, how can I resolve this issue? Despite attempting various solutions, the problem persists. As a newcomer to Next.js, I'm struggling to find helpful resources.

The error message I receive is:

POST https://mydomain/api/sendContact 500 (Internal Server Error)

Could someone provide guidance on how to troubleshoot and fix this issue? Any insights or suggestions would be greatly appreciated.

Answer 1

Just to confirm, in local, you tested with development mode. not in production mode. Correct? If yes then:

In development mode, the API folder will read the response. However in development mode ( After the npm run build ) your API must be used somewhere on the page, then only it works.

To make it work, create an empty page (empty.jsx) and utilize your API like below.

import React from 'react';

export default function EmptyPage({ data }) {
  return (
    <>
    </>
  );
}

export async function getStaticProps(context) {
  const res = await fetch(
    `https://mydomain/api/sendContact`
  );
  const data = await res.json();
  return {
    props: {
      data: data,
    },
  };
}

After that, create a new build and deploy it.