Vercel next.js environment variable not working
I'm using google maps in a Next.js project and everything's working locally. The google maps secret key is being stored in next.config.js which I access in the code through process.env.NEXT_PUBLIC_GOOGLEMAPS
When I deployed the project to Vercel, I didn't include next.js.config for security reasons. So I added the key under Settings -> Environment Variables
However, the environment variable is not working in production. When I console log process.env.NEXT_PUBLIC_GOOGLEMAPS, I get undefined
What could be causing this issue and how can I fix it? Thanks
This is how I got my setup to work...
- I have an
env.local
file for local dev key. Add.env.local.*
to .gitignore This file has my key/value pair like so:
1 NEXT_PUBLIC_G_KEY=AFLkefjlkwblahblahblah
- I have a next.config.js file that has this key as well in an
env
space:
env: { NEXT_PUBLIC_G_KEY: process.env.NEXT_PUBLIC_G_KEY }
(process.env works out of the box according to the docs)
- I deploy to vercel so I create a secret with the actual value of the key...:
$> yarn now secret add MyAppName_PRoD_G_KEY AFLkefjlkwblahblahblah
- i go to my app in vercel > settings > environment variables and create a new one in the UI, mapped to the secret i just made in the command line.