Nx vs Next.js | Environments files loaded in wrong order

Current Behavior

nx serve command, load .env file in apps/<next-app> two times:

• Nx loading…: see order priority
• Next.js loading…: see order priority

That cause .env file to be loaded in process.env on the first loading (Nx) so during the second loading (Next.js) the order is no longer maintained -> https://github.com/vercel/next.js/blob/canary/packages/next-env/index.ts#L52

i.e: same env var in both .env.development and .env, cause .env to have highest priority

Expected Behavior

The order of Next.js environment variables should be maintained

i.e: same env var in both .env.development and .env, should give to .env.development highest priority

Steps to Reproduce

1. Create Next.js app
2. Create all possibles env files supported by Next.js and set in each file an env var with the same key but different value https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
3. Launchnx serve
4. the order is not maintained (ie: in process.env.<envVarName> there is .env and not .env.development)

Environment

  Node : 14.17.0
  OS   : darwin x64
  yarn : 1.22.15

  nx : 12.9.0
  @nrwl/angular : Not Found
  @nrwl/cli : 12.9.0
  @nrwl/cypress : 12.9.0
  @nrwl/devkit : 12.9.0
  @nrwl/eslint-plugin-nx : 12.9.0
  @nrwl/express : Not Found
  @nrwl/jest : 12.9.0
  @nrwl/linter : 12.9.0
  @nrwl/nest : Not Found
  @nrwl/next : 12.9.0
  @nrwl/node : Not Found
  @nrwl/nx-cloud : Not Found
  @nrwl/react : 12.9.0
  @nrwl/schematics : Not Found
  @nrwl/tao : 12.9.0
  @nrwl/web : 12.9.0
  @nrwl/workspace : 12.9.0
  @nrwl/storybook : 12.9.0
  @nrwl/gatsby : Not Found
  typescript : 4.3.5

[kalinchernev]

Same issue with loading order holds true for nest.js + nx combination. The load order of nx overrides the one of the nest.js config module definition which makes the integration not as smooth as everything else nx does so far.

A configuration option to disable default loader would be welcome.

[ild0tt0re]

hi @ild0tt0re , thanks for opening the issue!

so as you noted, Nx doesn’t currently support environment variable files other than those that are mentioned in the docs that you linked to (Docs).

I assume this issue occurs only when you’re using env files that Nx doesn’t support, like env.development? Meaning, that this doesn’t happen when using env.local, for example? If this only happens for env files that Nx doesn’t currently support, I’d change this from a bug to an enhancement

Hi @kirjai , thanks for the answer.

Exactly! Fortunately, the environment variables loading process logic of Nx and Next.js is the same so if Nx can handle also these files would be great because we can use the framework transparently without having any side effects.