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

1 messages · Page 1 of 1 (latest)

quiet jolt
#

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

hybrid grottoBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

tardy citrus
#

how about dotenv-cli?

#

"build:uat": "dotenv -e .env.uat -- next build"
"build:qa": "dotenv -e .env.qa -- next build"

quiet jolt
tardy citrus
#

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

quiet jolt
#

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

#

@tardy citrus

tardy citrus
quiet jolt
tardy citrus
#

i'm almost env variables without NEXT_PUBLIC_ prefix aren't inplaced in bundle

quiet jolt
quiet jolt
# 
  "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 @tardy citrus

tardy citrus
#

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

quiet jolt
#

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

tardy citrus
#

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

quiet jolt
#

so how to make sure that it should take only the one like .env.qa only not the .env.development

tardy citrus
#

assuming your app is under app/ directory, create app/env/ directory and put ur env files here

#

then include app/env/ in .gitignore

quiet jolt
#

I am using Page Directory with Nextjs v16.0.3

quiet jolt
#

any help on this to fix it?

tardy citrus
#

it was just example, has nothing to do with app router/pages router

somber fox
quiet jolt
quiet jolt