12

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 enter image description here

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

Improve this question
2
  • 3
    Redeploying the build fixes my issue as I had updated the environment variable. vercel.com/docs/deployments/… Commented Oct 3, 2024 at 7:29
  • @TayyabChaudhary Thanks, redeploying fixed the issue in my case Commented Nov 12, 2024 at 11:24

6 Answers 6

Reset to default
8

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

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

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

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

vercel environment variable mapped to secret

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

yarn now secret add - you sure about this? I get Command "now" not found.
@Paul 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"
1

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.

Improve this answer

1 Comment

OP's environment variable already starts with NEXT_PUBLIC_
1

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

Improve this answer

1 Comment

This is my case as well. I first deployed my application and then created the envvars, and my application doesn't have the envvar refreshed. After redeploy my application the the they got refreshed and worked.
0

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

Improve this answer

Comments

0

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.

Improve this answer

Comments

0

In my case, I forgot to associate the variable with the project in Vercel. There you have a box that indicates that the variable is associated with XXXX project, by default it is not associated with any

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.