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).


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)

unyime profile image

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

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.

unyime profile image

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