Vercel next.js environment variable not working

Question

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

Answer 1

This is how I got my setup to work...

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

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

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

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