Environment Variables (.env) - Referencing Other Variables
Answered
California pilchard posted this in #help-forum
California pilchardOP
According to docs, it should be possible to reference other env variables defined in same
- https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#referencing-other-variables
I have .env file with following content:
and when trying to access
Why is NEXT_PUBLIC_API_ROOT evaluated to
.env file:- https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#referencing-other-variables
I have .env file with following content:
API_ROOT=api.base.url.com
NEXT_PUBLIC_API_ROOT=$API_ROOTand when trying to access
NEXT_PUBLIC_API_ROOT, value resolves to "$API_ROOT" string// ..
const apiRoot = process.env.API_ROOT
const apiRootPublic = process.env.NEXT_PUBLIC_API_ROOT
console.log(apiRoot) // GOOD: logs "api.base.url.com"
console.log(apiRootPublic) // BAD: logs "$API_ROOT"Why is NEXT_PUBLIC_API_ROOT evaluated to
"${API_ROOT}" string instead of "api.base.url.com"?Answered by California pilchard
since i'm using nx monorepo, i've put .env in nx workspace root dir, everything works except referrencing other env vars..
Solution is to put .env file in apps/web which is nextjs project, and then it works well
Solution is to put .env file in apps/web which is nextjs project, and then it works well
12 Replies
Wild Turkey
Just created a new Next.js project and it worked for me.
I tried using the same things with
I used this configuration with client component and server component. The only difference is that;
- In client components
- In server components, both log
Still would like to understand the problem better and help.
Are you using this in a server component or client?
Can you try
I tried using the same things with
.env and .env.local files just to check if it makes any difference, it didn't.I used this configuration with client component and server component. The only difference is that;
- In client components
apiRoot logs undefined, which would be expected because if an environment variable doesn't have NEXT_PUBLIC_ it won't be available in client side, only in Node environment.- In server components, both log
api.base.url.com without any problems.Still would like to understand the problem better and help.
Are you using this in a server component or client?
Can you try
NEXT_PUBLIC_API_ROOT=${API_ROOT}?White-winged Scoter
@California pilchard Can't you just declare them in your Next.Config.Js
You can do it like such:
@White-winged Scoter Click to see attachment
Wild Turkey
I don't think that would be a viable solution and probably wouldn't provide same convenience as using .env file since you won't be able to gitignore config as you would do with .env.
Also, they shouldn't have to.
Also, they shouldn't have to.
.env is a well established way of storing variables and should be working plug and play 🤔@Wild Turkey I don't think that would be a viable solution and probably wouldn't provide same convenience as using .env file since you won't be able to gitignore config as you would do with .env.
Also, they shouldn't have to. `.env` is a well established way of storing variables and should be working plug and play 🤔
White-winged Scoter
The reason why using nextconfig is good is if you need to declare a variable that's not just straightup text.
And I'm just saying if you need the issue fixed, you can use that method.
@White-winged Scoter <@915883063865651201> Can't you just declare them in your Next.Config.Js
California pilchardOP
that is not recommended by next team
I realized what was the issue
California pilchardOP
since i'm using nx monorepo, i've put .env in nx workspace root dir, everything works except referrencing other env vars..
Solution is to put .env file in apps/web which is nextjs project, and then it works well
Solution is to put .env file in apps/web which is nextjs project, and then it works well
Answer
@California pilchard that is not recommended by next team
White-winged Scoter
It's litterally stated in there docs, that this is another way in which to do it, and if anything it's a better more centralized way to configure global configs.
But I'm glad you found your solution!