How to read the secrets passed with github actions in NEXT js?

Question

I have configured my github actions yml as shown below:

name: GZB Unit Tests

on:
  push:
    branches:
      - main
  pull_request:
    branches: [main]

jobs:
  frontend_unit_tests:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 16.13.1
      - name: Install Yarn
        run: |
          yarn
      - name: Run Unit Tests in CI
        run: |
          yarn test:ci
      - name: Build the Project
        env:
          NEXT_PUBLIC_FB_CLIENT_API_KEY: ${{ secrets.NEXT_PUBLIC_FB_CLIENT_API_KEY }}
          NEXT_PUBLIC_FB_CLIENT_AUTH_DOMAIN: ${{ secrets.NEXT_PUBLIC_FB_CLIENT_AUTH_DOMAIN }}
          NEXT_PUBLIC_FB_CLIENT_STORAGE_BUCKET: ${{ secrets.NEXT_PUBLIC_FB_CLIENT_STORAGE_BUCKET }}
          NEXT_PUBLIC_FB_CLIENT_MESSAGING_SENDER_ID: ${{ secrets.NEXT_PUBLIC_FB_CLIENT_MESSAGING_SENDER_ID }}
          NEXT_PUBLIC_FB_CLIENT_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_FB_CLIENT_PROJECT_ID }}
          NEXT_PUBLIC_FB_CLIENT_APP_ID: ${{ secrets.NEXT_PUBLIC_FB_CLIENT_APP_ID }}
          NEXT_PUBLIC_FB_CLIENT_MEASUREMENT_ID: ${{ secrets.NEXT_PUBLIC_FB_CLIENT_MEASUREMENT_ID }}
          FB_ADMIN_PRIVATE_KEY: ${{ secrets.FB_ADMIN_PRIVATE_KEY }}
          FB_ADMIN_CLIENT_EMAIL: ${{ secrets.FB_ADMIN_CLIENT_EMAIL }}
          FB_ADMIN_RTDB_URL: ${{ secrets.FB_ADMIN_RTDB_URL }}
          NODE_ENV: ${{ secrets.NODE_ENV }}
        run: |
          yarn build

Now when I try to access it via: process.env.<VARIABLE_NAME> it says undefined. Can anyone help me understand what am I doing wrong? The build process is failing, should I configure it some other way? I have added all these secrets in the secrets tab of github settings.

Answer 1

NEXT uses its own web config to read files from .env.local. I was able to achieve my use case by creating a file .env.local and then passing in the secrets as shown below:

name: GZB Unit Tests

on:
  push:
    branches:
      - main
  pull_request:
    branches: [main]

jobs:
  frontend_unit_tests:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 16.13.1
      - name: Install Yarn
        run: |
          yarn
      - name: Run Unit Tests in CI
        run: |
          yarn test:ci
      - name: Build the Project
        run: |
          touch .env.local
          echo NEXT_PUBLIC_FB_CLIENT_API_KEY=${{ secrets.NEXT_PUBLIC_FB_CLIENT_API_KEY }} >> .env.local
          echo NEXT_PUBLIC_FB_CLIENT_AUTH_DOMAIN=${{ secrets.NEXT_PUBLIC_FB_CLIENT_AUTH_DOMAIN }} >> .env.local
          echo NEXT_PUBLIC_FB_CLIENT_STORAGE_BUCKET=${{ secrets.NEXT_PUBLIC_FB_CLIENT_STORAGE_BUCKET }} >> .env.local
          echo NEXT_PUBLIC_FB_CLIENT_MESSAGING_SENDER_ID=${{ secrets.NEXT_PUBLIC_FB_CLIENT_MESSAGING_SENDER_ID }} >> .env.local
          echo NEXT_PUBLIC_FB_CLIENT_PROJECT_ID=${{ secrets.NEXT_PUBLIC_FB_CLIENT_PROJECT_ID }} >> .env.local
          echo NEXT_PUBLIC_FB_CLIENT_APP_ID=${{ secrets.NEXT_PUBLIC_FB_CLIENT_APP_ID }} >> .env.local
          echo NEXT_PUBLIC_FB_CLIENT_MEASUREMENT_ID=${{ secrets.NEXT_PUBLIC_FB_CLIENT_MEASUREMENT_ID }} >> .env.local
          echo FB_ADMIN_PRIVATE_KEY=${{ secrets.FB_ADMIN_PRIVATE_KEY }} >> .env.local
          echo FB_ADMIN_CLIENT_EMAIL=${{ secrets.FB_ADMIN_CLIENT_EMAIL }} >> .env.local
          echo FB_ADMIN_RTDB_URL=${{ secrets.FB_ADMIN_RTDB_URL }} >> .env.local
          echo NODE_ENV=${{ secrets.NODE_ENV }} >> .env.local
          yarn build