I send CI/CD, dockerfile, next.config.js, and pakcage.json below. The pipeline will successfully pass without any errors and the project starts. But, when on the development branch, it still uses .env.production and not .env.development.
We have tried to dynamically create a .env file based on the branch. But still it prefers .env.production. How can we fix this?
The project is next.js 14 and we use yarn. We have two important branches, development and main and we have .env.production and .env.development

CI/CD file:

stages:
  - build

build:
  stage: build
  tags:
    - backend-blinkship
  before_script:
    - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
  script:
    - docker build -t <--CONTAINER_NAME--> --build-arg branch=${CI_COMMIT_BRANCH} .
    - DOCKER_TAG=$CI_REGISTRY/customer-portal/frontend/CONTAINER_NAME:$PROJECT_VERSION
    - docker push <--CONTAINER_NAME-->

Dockerfile:

FROM node:20.9.0-alpine as base
WORKDIR /app
RUN apk add --no-cache libc6-compat
COPY . /app
ARG branch
RUN if [ "$branch" = "main" ] || [ "$branch" = "master" ]; 
    then cp .env.production /app/.env; 
    else cp .env.development /app/.env; 
    fi
RUN yarn install
RUN yarn build
CMD ["yarn", "start"]
EXPOSE 3000

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {};

const { parsed: localEnv } = require('dotenv').config({
  path: process.env.NODE_ENV === 'production' ? '.env.production' : '.env.development',
});

module.exports = {
  env: {
  },
};

package.json:

{
  "name": "blink-ship-front-end",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint --ext .ts,.tsx .",
    "prepare": "husky",
    "format": "prettier-eslint --write $PWD/'**/*.{ts,tsx}'",
    "check-lint": "eslint . --ext ts --ext tsx --ext js",
    "check-types": "tsc --pretty --noEmit",
    "test-all": "npm run check-format && npm run check-lint && npm run check-types && npm run build"
  },
  "dependencies": {
    "@ant-design/icons": "^5.3.0",
    "antd": "^5.13.1",
    "antd-img-crop": "^4.21.0",
    "axios": "^1.6.5",
    "classnames": "^2.5.1",
    "dotenv": "^16.4.5",
    "eslint-config-prettier": "^9.1.0",
    "js-cookie": "^3.0.5",
    "moment": "^2.30.1",
    "next": "^14.2.2",
    "next-auth": "^4.24.5",
    "nextjs-toploader": "^1.6.11",
    "nprogress": "^0.2.0",
    "react": "^18",
    "react-dom": "^18",
    "swr": "^2.2.5",
    "tailwindcss": "^3.4.1",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
    "@types/js-cookie": "^3.0.6",
    "@types/node": "^20",
    "@types/nprogress": "^0.2.3",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-airbnb-typescript": "^17.1.0",
    "eslint-config-next": "14.0.4",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "husky": "^9.0.11",
    "postcss": "^8",
    "prettier": "^3.2.4",
    "typescript": "^5"
  }
}