Next.js Discord

Discord Forum

handle custom .env with build & start command in 16.0.3 Page Router

Unanswered
Singapura posted this in #help-forum
Open in Discord
SingapuraOP
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

33 Replies

Pacific sand lance
how about dotenv-cli?
"build:uat": "dotenv -e .env.uat -- next build"
"build:qa": "dotenv -e .env.qa -- next build"
@Pacific sand lance `"build:uat": "dotenv -e .env.uat -- next build"` `"build:qa": "dotenv -e .env.qa -- next build"`
SingapuraOP
I'm not sure about it, that's why I am asking!.. and then npm run start command will remain same?
Pacific sand lance
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 runtime
so you still have to provide those env vars on the server when the app runs
SingapuraOP
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
@Pacific sand lance
@Pacific sand lance `"build:uat": "dotenv -e .env.uat -- next build"` `"build:qa": "dotenv -e .env.qa -- next build"`
Pacific sand lance
then you should we fine with these, just create start:uat, start:qa... scripts to provide runtime env
@Pacific sand lance then you should we fine with these, just create `start:uat`, `start:qa`... scripts to provide `runtime` env
SingapuraOP
just for build command, not required for start command right?
i'm almost env variables without NEXT_PUBLIC_ prefix aren't inplaced in bundle
@Pacific sand lance i'm almost env variables without `NEXT_PUBLIC_` prefix aren't inplaced in bundle
SingapuraOP
Sorry, but I didn't get you & understand you at all
SingapuraOP
  "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 exists

please help me @Pacific sand lance
Pacific sand lance
the message you are seeing (- Environments: .env.development) comes from nextjs
if im right it lookups variables in following order: process.env > .env.{NODE_ENV}.local > .env.local > .env.{NODE_ENV} >.env or something similiar
so in your case:
1. you load env variables from .env.qa using dotenv clie
2. dotenv cli runs next dev with .env.qa content merged with process.env
3. 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.development
if you want to get rid of - Environments: .env.development message - either remove, rename or move .env.development from project directory
SingapuraOP
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, right
Pacific sand lance
as per docs, it first lookups variable in process.env, and dotenv cli already merged .env.qa with process.env so you should be fine
to make sure you put TEST_VARIABLE=1 in .env.qa and TEST_VARIABLE=2 in .env.development
then in some RSC log process.env.TEST_VARIABLE
SingapuraOP
so how to make sure that it should take only the one like .env.qa only not the .env.development
Pacific sand lance
assuming your app is under app/ directory, create app/env/ directory and put ur env files here
then include app/env/ in .gitignore
SingapuraOP
I am using Page Directory with Nextjs v16.0.3
SingapuraOP
any help on this to fix it?
Pacific sand lance
it was just example, has nothing to do with app router/pages router
@Azawakh Ask to chat gtp. If so you can get the correct anser. Just I tried it.
SingapuraOP
I tried ChatGPT as well, even that wasn't working too
Furthermore, how to use .env.test as that's supported by Nextjs NODE_ENV