skip to Main Content

This is my first Next JS – MongoDB Project, so everything works fine on my localhost. After I deployed my website on Vercel, I got 500: Internal Server Error on several routes (I think it’s only the ones that have their data filled from the database), I double-checked my environment variables and everything was fine so I’m guessing this error has to do with "getServerSideProps", I’ve seen similar questions online. Still, I didn’t find any helpful solutions.

Here’s my code on GitHub: https://github.com/MoeElItani/Click-N-Eat
and my deployed website: https://click-n-eat.vercel.app/

On Localhost:
On Localhost

Deployed:
Deployed

2

Answers


  1. Chosen as BEST ANSWER

    Thanks to @juliomalves I checked my Function Logs and I found out the problem was that I was getting my data from localhost:3000/api/...

      const res = await axios.get(`http://localhost:3000/api/Items/${params.id}`);
    

    Changed to:

      const res = await axios.get(`/api/Items/${params.id}`);
    

  2. If you’re using mongodb atlas cluster, whitelist your ip. Change to 0.0.0.0. This will allow access database from anywhere.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search