I am getting 500 internal server error after deploying a Next.js app to Vercel. The project works in the local machine but isn’t working in the URL to which it is deployed to.
I have used environment variables in Vercel, which might be related to the issue.
I added these 4 env variables – NEXTAUTH_URL, NEXTAUTH_SECRET, TWITTER_CLIENT_ID, TWITTER_CLIENT_SECRET.
In my project, I’ve created a separate file ‘.env.local’ which contains all of my project-related keys and URLs.
At first, this env variable ‘NEXTAUTH_URL’ was pointing to ‘http://localhost:3000/’
NEXTAUTH_URL = http://localhost:3000/
And then, after deploying my app in Vercel, I updated that variable with the deployed URL in my project as well as in Vercel.
NEXTAUTH_URL = https://twitter-clone-seven-coral.vercel.app/
I have also added the above URL in ‘Twitter’s Developer Portal’ in ‘OAuth 2.0’ in the ‘Callback URI/Redirected URL’ section:
Before deploying my app in Vercel, the CALLBACK URI/REDIRECT URL was pointing to https://localhost:3000/api/auth/callback/twitter
and WEBSITE URL was pointing to https://test.com
which I then updated after deploying the app initially.
This is the first time I’m working with Environment variables, so I do not have much idea on how to proceed with this error.
Package.json for reference:
3
Answers
Had faced same problem and find out solution after a long research
The Trick is you have to set environment variable to vercel or any host platform
how to set environment variable in vercel
how to set environment variable in heroku
Yes, have to set the Environment Variable , tried it with vercel but didnot supported or maybe missed something, but works fine with netlify, just deploy with the environment variable, from your project .env.local files, get the keys and values give also provide the NEXTAUTH_URL properly , then it should run
I don’t know for other hosting platforms and tiers but when I deployed my app to Vercel free tier I had to add every Environment Variables to the hosting platform. You need to go to Dashboard->Your app->Settings->Environment Variables and there you need to add all of your variables. With same name and api key that you used in .env.local. Also, don’t forget to use NEXT_PUBLIC_ in front of every Environment Variable name. So it should look like this eg. NEXT_PUBLIC_MONGODB_URI="somethingsomething". So this NEXT_PUBLIC_ before the name of Environment Variable makes it so your Environment Variable is exposed to the browser. You don’t need to use NEXT_PUBLIC_ when working localy but when you want to deploy then you need to use it in order to expose the Environment Variable to the browser. I hope this helps. It helped me.