4

Let's say I am deploying Next.js in different env, for example.

  1. local development
  2. staging deployment
  3. production deployment

Previously I hand used .env file with one of the framework where I could easily name the file like .env.local, .env.stage & .env.prod and when I run node app locally it would load .env.local, with export STAGE=stageframework would use.env.stage`, like wise fro productoin.

Is that such support in Next js where I can have different .env file for different stage. If it is supported then how would I specify which stage Next.js is running.

Pavan Kumar
  • 1,715
  • 1
  • 24
  • 48
  • The point of .env files is to provide a local environment that simulate the env vars available in the production environments. In staging and production, you don't need a .env file, you need to look up how to configure the environment in whatever platform you're using. – jonrsharpe Feb 23 '22 at 09:02
  • @jonrsharpe As per my understanding, in Next.js, env var are replaced at build time with actual values, unlike any other program where env var picked at runtime. So, even if I set env var according to platform where Next.js is deployed it wont use those variable, right? – Pavan Kumar Feb 24 '22 at 04:42
  • 2
    This is still an unsolved problem in Next.js as far as I'm aware. Client side (`NEXT_PUBLIC_`) environment variables are frozen at build time. – Brian Thompson Feb 24 '22 at 15:59
  • To workaround this I'm using `@beam-australia/react-env` for ENV's I need to be changed in different environments (staging, prod), but to get build time values I still need to put them in the env.production, so I'm not completely satisfied with this solution. – Brian Thompson Feb 24 '22 at 16:03
  • Try this answer I wrote. 0 Dependency. https://stackoverflow.com/a/76724510/3556531 – KeshavDulal Jul 19 '23 at 19:40

2 Answers2

1

You can have different environments, just need to follow this

For production

// .env.production.local
// This file is for production and run with next start or npm run start
// NODE_ENV=production

For development

// .env.development.local
// This file is for development and run when next dev or npm run dev
// NODE_ENV=development

For tests

// .env.test.local
// This file is for tests with jest or cypress for example
// NODE_ENV=test

If you want know more about this, here is the complete info about environments in next js

Update:

If you want to run more environments without next standard, you can do this manually:

// package.json
"scripts": {
  ...
  "dev:staging": "APP_ENV=staging next dev",
}
...


// next.config.js
require('dotenv-flow').config({
  node_env: process.env.APP_ENV || process.env.NODE_ENV || 
   'development',
});

const env = {};
Object.keys(process.env).forEach((key) => {
  if (key.startsWith('NEXT_PUBLIC_')) {
    env[key] = process.env[key];
  }
});

module.exports = {
  env,
};

And when you run npm run/yarn dev:staging your staging environment from .env.staging.local will be loaded, my reference is from flybayer and you can read more here

barrilocho
  • 139
  • 3
  • How about beyond dev, prod and test? Like uat, stage, etc. – Pavan Kumar Feb 24 '22 at 04:43
  • The standard for next is just production, development and test, if you need more, you need to change NODE_ENV to other like APP_ENV, you can read more about this [here](https://nextjs.org/docs/messages/non-standard-node-env) I updated my answer to do that – barrilocho Feb 24 '22 at 15:56
1

Original Answer - https://stackoverflow.com/a/76724510/3556531

I am using package.json's script to copy different environment secrets to .env.local based on the command invoked.

"build-dev":"cp .env.dev .env.local && yarn build",
"build-prod":"cp .env.prod .env.local && yarn build"

I won't say its ideal but get the job done in my case.

KeshavDulal
  • 3,060
  • 29
  • 30