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

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