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

Sternberg

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.

Declarative

yarn now secret add - you sure about this? I get Command "now" not found. – Bretbretagne

@Bretbretagne Truuuuee, this was applicable at the time of writing in 2021. now has changed to vercel, and the command has changed as well; to: vercel secrets add [secret-name] [secret-value] as documented here: vercel.com/docs/cli/secrets Ideally the documentation stays current-ish; the idea you're going to google on is "adding nextjs secrets via CLI" – Declarative

Answer 2

For me it worked only by adding them through the vercel interface (I had some interference because of the next.config.js file, however as soon as I added that to .gitignore everything worked).

Jaimie

Answer 3

If you have restricted the IP addresses that can access your Google Maps API, most probably Vercel IP is denied access by Google. Maybe your .env variable is working but the problem is Google Maps IP address restriction.

Absolution

Answer 4

I have faced the same problem. Turned out that Vercel exposes only variables that start with NEXT_PUBLIC. E.g. NEXT_PUBLIC_PRODUCTION_BE_API. Hope this helps.

Layout

Answer 5

In my case I just had to redeploy the application and it worked.

Jointer