Next.js Discord

Discord Forum

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

Unanswered
Egyptian Mau posted this in #help-forum
Open in Discord
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 qa build I want to use env.qa, for uat build I want to .env.uat how to achieve it

33 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 runtime
so 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 exists

please help me @Longtail tuna
Longtail tuna
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
Egyptian 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, right
Longtail 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 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
Egyptian MauOP
so how to make sure that it should take only the one like .env.qa only not the .env.development
Longtail tuna
assuming your app is under app/ directory, create app/env/ directory and put ur env files here
then include app/env/ in .gitignore
Egyptian MauOP
I am using Page Directory with Nextjs v16.0.3
Egyptian MauOP
any help on this to fix it?
Longtail tuna
it was just example, has nothing to do with app router/pages router
@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
Furthermore, how to use .env.test as that's supported by Nextjs NODE_ENV