handle custom .env with build & start command in 16.0.3 Page Router
Unanswered
Egyptian Mau posted this in #help-forum
Egyptian MauOP
how to setup multiple .env in Nextjs? but I will have custom name, and I want to adopt the relevant one...
like for
like for
qa build I want to use env.qa, for uat build I want to .env.uat how to achieve it33 Replies
Longtail tuna
how about
dotenv-cli?"build:uat": "dotenv -e .env.uat -- next build""build:qa": "dotenv -e .env.qa -- next build"@Longtail tuna `"build:uat": "dotenv -e .env.uat -- next build"`
`"build:qa": "dotenv -e .env.qa -- next build"`
Egyptian MauOP
I'm not sure about it, that's why I am asking!.. and then
npm run start command will remain same?Longtail tuna
well it depends
as I understand it, nextjs puts
NEXT_PUBLIC_ env vars into the build, but anything without that prefix is only read at runtimeso you still have to provide those env vars on the server when the app runs
Egyptian MauOP
I will be deplyoing the App on Ubuntu Linux Server, so I'll be utilizing
.env.* depending upon the Deployment, like .qa for QA Team, .uat for Business Team & .env.production for the Production Deployment@Longtail tuna
@Longtail tuna `"build:uat": "dotenv -e .env.uat -- next build"`
`"build:qa": "dotenv -e .env.qa -- next build"`
Longtail tuna
then you should we fine with these, just create
start:uat, start:qa... scripts to provide runtime env@Longtail tuna then you should we fine with these, just create `start:uat`, `start:qa`... scripts to provide `runtime` env
Egyptian MauOP
just for build command, not required for start command right?
i'm almost env variables without
NEXT_PUBLIC_ prefix aren't inplaced in bundle@Longtail tuna i'm almost env variables without `NEXT_PUBLIC_` prefix aren't inplaced in bundle
Egyptian MauOP
Sorry, but I didn't get you & understand you at all
Egyptian MauOP
"scripts": {
"dev:qa": "dotenv -e .env.qa -- next dev",
},this is how my
package.json scripts looks like, and below is the way I start the command:npm run dev:qa
> induzkart_client@0.1.0 dev:qa
> dotenv -e .env.qa -- next dev
▲ Next.js 16.0.3 (Turbopack)
- Local: http://localhost:3000
- Network: http://192.168.1.3:3000
- Environments: .env.development
✓ Starting...if you see, it's still taking the
.env.development even though .env.qa existsplease help me @Longtail tuna
Longtail tuna
the message you are seeing (
- Environments: .env.development) comes from nextjsif im right it lookups variables in following order:
process.env > .env.{NODE_ENV}.local > .env.local > .env.{NODE_ENV} >.env or something similiarso in your case:
1. you load env variables from
2. dotenv cli runs
3. nextjs loads
1. you load env variables from
.env.qa using dotenv clie2. dotenv cli runs
next dev with .env.qa content merged with process.env3. nextjs loads
.env.development (.env.development since it's in above order)if nextjs docs about env variables are true, it will first pickup variables you already loaded from
.env.qa before looking up in .env.developmentif you want to get rid of
- Environments: .env.development message - either remove, rename or move .env.development from project directoryEgyptian MauOP
Understood!.. but that's not right correct? when we say I need to load
.env.qa then even whatever the precedence or order it is, Nextjs should consider taking .env.qa instead of what coming first in order, rightLongtail tuna
as per docs, it first lookups variable in
process.env, and dotenv cli already merged .env.qa with process.env so you should be fineto make sure you put
TEST_VARIABLE=1 in .env.qa and TEST_VARIABLE=2 in .env.developmentthen in some RSC log
process.env.TEST_VARIABLEEgyptian MauOP
so how to make sure that it should take only the one like
.env.qa only not the .env.developmentLongtail tuna
assuming your app is under
app/ directory, create app/env/ directory and put ur env files herethen include
app/env/ in .gitignoreEgyptian MauOP
I am using
Page Directory with Nextjs v16.0.3Egyptian MauOP
any help on this to fix it?
Longtail tuna
it was just example, has nothing to do with app router/pages router
@Egyptian Mau how to setup multiple .env in Nextjs? but I will have custom name, and I want to adopt the relevant one...
like for `qa` build I want to use `env.qa`, for `uat` build I want to `.env.uat` how to achieve it
Lakeland Terrier
Ask to chat gtp.
If so you can get the correct anser.
Just I tried it.
If so you can get the correct anser.
Just I tried it.
@Lakeland Terrier Ask to chat gtp.
If so you can get the correct anser.
Just I tried it.
Egyptian MauOP
I tried ChatGPT as well, even that wasn't working too
@Longtail tuna assuming your app is under `app/` directory, create `app/env/` directory and put ur env files here
Egyptian MauOP
what the difference it makes?
Furthermore, how to use
.env.test as that's supported by Nextjs NODE_ENV