DEV Community

Environment Variables in Next.js

Akhila Ariyachandra on March 06, 2020

Updated my original blog post on 18th May, 2020 to reflect the how Next.js v9.4+ handles the .env file. Often we need to use certain v...

Read full post

Eranga Lakmal • Apr 23 '20 • Edited

Hello Akhila. My name is Eranga from Colombo. I have a question. When we create a secrete using now secrets add. It's available in the Development environment. But how do we publish it to "Preview" and "Production" envoronments of Zeit. I am using Zeit now. The env variable is working fine in the Dev env. But it's undefined in the Prev and Prod envs. Any clue ?

Akhila Ariyachandra • Apr 23 '20

ZEIT recently changed recently changed how the Environment Variables are handled, so I'll need to update the post to reflect that. From what I've tested so far, the now.json file and secrets are no longer needed. You just need to specify the variables with now env add. Hope it helps.

Eranga Lakmal • Apr 23 '20

Thank you for replying. Yes, It's working without now.json and the secrets. But after we deploy it the values are not available(undefined) in the "Preview" environment.

Akhila Ariyachandra • Apr 23 '20

Could you go to the project page in Vercel (ZEIT) and check if the variables are available for Preview? If not you can manually added from there.

Eranga Lakmal • Apr 23 '20

Yes. I have set the values. We can create env values for all the environments locally using the now env add <VARIABLE NAME> command and publish to remote. Also we can add values directly on the settings page and pull them to the local using now pull env. I tried both ways. Unfortunately the values are available in local but not available on Preview in both cases. Bad luck

Akhila Ariyachandra • Apr 30 '20 • Edited

A workaround I found for now is to list all the variables you want in the client side code in the env property of the Next.js config.

env: {
    AUTH_SECRET: process.env.AUTH_SECRET,
}

I updated the post with more details.

Eric Wallen • Apr 28 '20

Hi, I am having the same problem. This solution is working locally for development but when I deploy to preview or production the values are undefined.

Thanks for helping me get this far. It's nice to have a development working. If you have any idea how to get preview and production to work I would be truly in your debt.

Akhila Ariyachandra • Apr 30 '20 • Edited

A workaround I found for now is to list all the variables you want in the client side code in the env property of the Next.js config.

env: {
    AUTH_SECRET: process.env.AUTH_SECRET,
}

I updated the post with more details.

Eric Wallen • Apr 30 '20 • Edited

Sweet, thanks. I tried it and it's working. Very helpful.

Aleksandrs Larionovs • Apr 22 '20

Or you can just put all env vars in now.json and not commit it to github. Problem solved?

Akhila Ariyachandra • Apr 23 '20

Not really because this won't make environment variables available in the ZEIT deployment environment.

Aleksandrs Larionovs • Apr 23 '20

It will when you deploy with now or now --prod(If you put actual envs not just "@now-auth-secret" references). I mean it works for me, not sure what kind of problems you've encountered

Akhila Ariyachandra • Apr 23 '20

The purpose of using the .env file is to avoid committing sensitive data like the database URI or the JWT secret to the repo. In an ideal case we should avoid doing it at all costs, but if the variable isn't sensitive we could add it directly to now.json and commit it to the repo (though I still wouldn't recommend it).

Aleksandrs Larionovs • Apr 23 '20

Thats what my first comment was about, put envs in now.json and add it to git ignore. It serves the same purpose as .env

Kiel • Apr 26 '20

don't now.json files need to get commited though?
env files never get committed...
there's also a .nowignore file specifically to ignore now stuff.....

Came here because i'm in the same boat trying to "do it right" by using now secret and .env files locally, and the env variables UI at vercel.com.

None are working in preview/prod. only locally in dev.

Aleksandrs Larionovs • Apr 26 '20 • Edited

If there is no config other than your envs in now.json, there is no need to commit it. Now.json file+Vercel is one of the ways to deploy your nextjs(or other) app, it's not integral part of you repo.

Michael B. • Apr 27 '20

Seriously, THANK YOU. I've been struggling the whole day trying to make it works, but the Next.js doc was useless.
Thanks again

Michael B. • Apr 27 '20

I talked to fast :p

It works well locally, but as soon as I test it on zeit (vercel), I have undefined on all my variables...

Akhila Ariyachandra • Apr 28 '20

Did you upload the variables using now env add. Maybe I'll need to review my post again. I originally wrote it when we had to use Zeit secrets.

Michael B. • Apr 28 '20 • Edited

No but I managed to do something with this repo: github.com/zeit/next.js/tree/canar...

1) Create now.json and fill it like that :

{
  "build": {
    "env": {
      "SECRET": "@my-secret-key",
      "ANOTHER_SECRET": "@my-other-secret-key"
    }
  }
}

2) Then in your next.config.js you'll add module.exports:

module.exports = {
  env: {
    SECRET: process.env.SECRET,
  },
}

3) What worked for me at the end was to add my variables using "now secret add". I previously added my variable in the new variable UI on the website but it didn't work...

Hope this will help!

Akhila Ariyachandra • Apr 30 '20 • Edited

A workaround I found for now is to list all the variables you want in the client side code in the env property of the Next.js config.

env: {
    AUTH_SECRET: process.env.AUTH_SECRET,
}

I updated the post with more details. In the example I linked at the end of the post, I didn't use any secrets.