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.

❤️❤️❤️

Discussion (3)

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