DEV Community 👩‍💻👨‍💻

Cover image for NextJS API working on locals but not working on production
Abayomi Olatunji
Abayomi Olatunji

Posted on

NextJS API working on locals but not working on production

Hey, I am writing this post to share the experience I had dealing with NextJS API not working on production (that is, returning a 404 Bad Request).

A 400 Bad Request simply means that the server cannot process a request due to client error and this errors could be wrong URL or issues in the service use in the request.

For this particular use-case, the problem was related to the environment variables.

The environment variables store in the .env.local file wasn't working after deploying to Vercel and the solution is to also setup your variables on Vercel.

Let me show you a walkthrough;

Adding the variables needed in your project in .env file, you can check Environment Variable for more information of that. (NOTE: Make sure you add it to .gitignore so you don't expose it).

SAMPLE ENV VARIABLE

DB_USER=james
Enter fullscreen mode Exit fullscreen mode

After deploying the app on Vercel, navigate to Settings

Image Navigate to Settings

Click on Environment Variables

Image Navigate to environment variable

From there, you can add your environment variable and your web app will work as expected.

I hope this is helpful to you.

❤️❤️❤️

Top comments (5)

Collapse
 
unyime profile image
Unyime

I have a problem, i have connected but mine is returning a 500

Collapse
 
abayomijohn273 profile image
Abayomi Olatunji Author

Oh..that is an internal server error. Are you getting the 500 on production or locals. also you can share a screenshot.

Collapse
 
unyime profile image
Unyime

I'm getting a 500 on production but not on local. What part should I screenshot

Thread Thread
 
rutikwankhade profile image
Rutik Wankhade

hey did you fix it? how?

Thread Thread
 
unyime profile image
Unyime

To be honest it depends on how you're calling it, it could be a number of things.

  • If you're using env variables check well

  • Syntax errors from your request adapter to how you're calling them

Mine was an issue from my env variable. The API was not spelt well.

I could offer more assistance if you'd like

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!