Ubuntu – nextjs environment variables are appearing as undefined in azure app service

I’ve seen all similar answers and none of the solutions seems to work for me.

I am deploying my solution using github actions workflow, here is what my yaml code looks like:

name: Build and deploy x platofrm - UAT

on:
  push:
    branches:
      - master
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Set up Node.js version
        uses: actions/setup-node@v1
        with:
          node-version: '18.x'

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present
          
      - name: Set Environment Variables
        run: |
          echo "NEXT_PUBLIC_API_URL=${{ vars.NEXT_PUBLIC_API_URL }}" > .env.production
          echo "NEXT_PUBLIC_PYTHON_API_URL=${{ vars.NEXT_PUBLIC_PYTHON_API_URL }}" >> .env.production
          echo "NEXTAUTH_SECRET=${{ secrets.NEXTAUTH_SECRET }}" >> .env.production

      - name: Zip artifact for deployment
        run: zip -r release.zip .
      
      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v2
        with:
          name: node-app
          path: release.zip

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v2
        with:
          name: node-app
          
      - name: Unzip artifact for deployment
        run: unzip -o release.zip

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'x-platform-uat'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_DFE186FC1DA249E4A244CC61460052A6 }}
          package: release.zip

The build and deploy pipelines work absolutely fine.

I read in several articles that you cannot read from the App Settings/Configuration Settings within the webapp and so I am manually creating the .env file and injecting into it.

FYI I have also tried different variants of .env.local .env.production.local .env.development.local etc etc in fact my actual pipeline creates all these variations which I’ve removed for brevity of code.

I’ve read the documentation:
https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#loading-environment-variables

and can confirm that I have constructed my .env file like so:
NEXT_PUBLIC_API_URL=https://something.api

but when I do:

console.log(process.env['NEXT_PUBLIC_API_URL']);

or

console.log(process.env.NEXT_PUBLIC_API_URL);

Neither work.

I have even gone to extent of installing:
dotenv

then ensuring this exists in the next.config.js file like so:

require('dotenv').config();

But still no luck!

Any help appreciated!!!