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...
For further actions, you may consider blocking this person and/or reporting abuse
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 usingZeit now
. The env variable is working fine in the Dev env. But it's undefined in the Prev and Prod envs. Any clue ?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 withnow env add
. Hope it helps.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.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.
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 usingnow pull env
. I tried both ways. Unfortunately the values are available in local but not available on Preview in both cases. Bad luckA 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.I updated the post with more details.
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.
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.I updated the post with more details.
Sweet, thanks. I tried it and it's working. Very helpful.
Or you can just put all env vars in now.json and not commit it to github. Problem solved?
Not really because this won't make environment variables available in the ZEIT deployment environment.
It will when you deploy with
now
ornow --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 encounteredThe 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).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
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 theenv variables
UI at vercel.com.None are working in preview/prod. only locally in dev.
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.
Seriously, THANK YOU. I've been struggling the whole day trying to make it works, but the Next.js doc was useless.
Thanks again
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...
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.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 :
2) Then in your next.config.js you'll add module.exports:
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!
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.I updated the post with more details. In the example I linked at the end of the post, I didn't use any secrets.