Next.js build does not use .env.development

Question

I would like to set up two different builds for a next.js application.

package.json:

...
"scripts": {
  "dev": "next dev",
  "debug": "cross-env NODE_OPTIONS='--inspect' next dev",
  "build:dev": "set NODE_ENV=development && next build",
  "build:prod": "set NODE_ENV=production && next build",
  "start": "node server.js"
},
"dependencies": {
  "bootstrap": "^5.0.0-beta3",
  "lodash": "^4.17.21",
  "next": "^10.0.0",
  "react": "17.0.1",
  "react-dom": "17.0.1",
  "react-scrollspy": "^3.4.3",
  "sass": "^1.32.11"
},
"devDependencies": {
   "cross-env": "^7.0.3"
}
...

Then I created .env.development and .env.production with different hostname and port, like this:

HOST=127.0.0.3
PORT=9999
API_DOMAIN=http://$HOST:$PORT/API

But if I run npm run build:dev it displays this:

$ npm run build:dev

> [email protected] build:dev
> set NODE_ENV=development && next build

warn  - You are using a non-standard "NODE_ENV" value in your environment. This creates inconsistencies in the project and is strongly advised against. Read more: https://nextjs.org/docs/messages/non-standard-node-env
info  - Loaded env from W:\web\projects\xfb\xfbweb\react\.env.production
info  - Using webpack 4. Reason: future.webpack5 option not enabled https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types...
info  - Creating an optimized production build...
info  - Compiled successfully
info  - Collecting page data...
FetchError: request to http://127.0.0.3:9999/API/GET/blog/?mode_cd=summary&offset=1&limit=2&language_cd=eng failed, reason: connect ECONNREFUSED 127.0.0.3:9999
...

It seems this uses the .env.production. How can I force this to use the .env.development in this case?
By the way, if i run npm run build:prod it also uses the .env.production.
I tried to update next to v12.1.0 but still do the same.