Next Js does not pick correct .env file

[morris7]

Current Behavior

With a nextjs project, create env files .env.development, .env.staging, .env.production . Create a "development", "staging", "production" configuration under your "build" target, run :
nx run my-app:build:staging or nx run my-app:build --configuration=staging

Nextjs will build with .env.production file

Expected Behavior

should use correct env file determined by configuration

GitHub Repo

can be seen with @latest nx setup

Steps to Reproduce

1. install nx latest
2. selected react, nextjs project
3. create .env.development, .env.staging, .env.production .env files under /my-app directory
4. create development, staging, production configuration objects under "build" target
5. run nx run my-app:build:staging or nx run my-app:build --configuration=staging

Nx Report

Node   : 20.12.0
OS     : linux-x64
pnpm   : 8.15.5

nx                 : 18.0.7
@nx/js             : 18.0.7
@nx/jest           : 18.0.7
@nx/linter         : 18.0.7
@nx/eslint         : 18.0.7
@nx/workspace      : 18.0.7
@nx/cypress        : 19.0.5
@nx/devkit         : 18.0.7
@nx/esbuild        : 18.0.7
@nx/eslint-plugin  : 18.0.7
@nx/next           : 18.0.7
@nx/playwright     : 18.0.7
@nx/react          : 18.0.7
@nx/rollup         : 18.0.7
@nx/storybook      : 19.0.5
@nrwl/tao          : 18.0.7
@nx/web            : 18.0.7
@nx/webpack        : 18.0.7
typescript         : 5.3.3
---------------------------------------
Community plugins:
@nx-tools/nx-container : 5.2.0
---------------------------------------
The following packages should match the installed version of nx
  - @nx/cypress@19.0.5
  - @nrwl/cypress@19.0.5
  - @nx/storybook@19.0.5
  - @nrwl/storybook@19.0.5

To fix this, run `nx migrate nx@19.0.5`

Failure Logs

No response

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[ndcunningham]

I think the problem you are facing is more to deal with how Next.js loads environment variables.

https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#environment-variable-load-order

Although with Nx you can create any configuration you want, Next.js only allows (development, production and test) which is based on the NODE_ENV. If you are using our executors (not inferred targets) the NODE_ENV is automatically set if not previously set to:

• development when running the dev server
• production otherwise

This follows 1:1 with Next.js commands.
To override this behaviour, you need to set the NODE_ENV before running a command or adjust your environment variable names according to Next.js documentation.

NODE_ENV=development nx build acme