[FIXED] How to use environment variables when running Next JS build command on Github Actions

Issue

How can I let Github actions access my .env.local file for building my Next JS app without exposing the .env.local file on my github repository?

Currently, the build will not have access to .env.local when building using Github Actions (because that file is not pushed to the Github repo).

I have a next.config.js file that looks like

/** @type {import('next').NextConfig} */

const isProd = process.env.NEXT_PUBLIC_ENVIRONMENT === "PROD";

const nextConfig = {
  reactStrictMode: true,
  basePath: isProd ? '/XXX' : '', 
  assetPrefix: isProd ? '/XXX' : '' 
}

module.exports = nextConfig

And a deploy.workflow.yaml for Github Actions that looks like

name: deploy-workflow
on
  push:
    branches:
      - main # Pushing a commit to the master branch is the event that triggers the workflow.
jobs:
  deploy-job:
    runs-on: ubuntu-latest # Configures the job to run on a fresh Ubuntu Linux virtual machine hosted by GitHub (aka the Runner).
    steps:
      - uses: actions/checkout@v2 # The action to check out the repo and download the code into the Runner. 
      - uses: actions/setup-node@v2 # The action to install Node.js in the Runner, and allow us to run npm commands.
        with:
          node-version: '16'
      - uses: actions/cache@v2 # This action caches the node_modules folder across builds, and makes the Runner use the cache as long as package-lock.json doesn’t change.
        with:
        # Next.js stores its cache in the .next/cache directory. This will persist the cache across builds for faster application rebuilds. E.g., if I only updated my codebase but not the dependencies, this avoids re-bundling the dependencies.
         path: |
           ${{ github.workspace }}/node_modules
           ${{ github.workspace }}/.next/cache
         # Generate a new cache whenever packages or source files change.
         key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.js') }}
         # If source files changed but packages didn't, rebuild from a prior cache. 
         restore-keys: |
           ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
      - run: npm install
      - run: npm run build # Builds the static files
      - uses: stefanzweifel/git-auto-commit-action@v4 # This action will commit changes made in the Runner environment, and push the commit to the GitHub repo. The default commit message will be “Automated publish”.
        with:
          commit_message: Automated publish
      - name: Deploy 
        uses: JamesIves/github-pages-deploy-action@4.1.5
        with:
          branch: gh-pages
          folder: output

Solution

Besides the .env.local file, which is typically meant to contain things that are only needed locally, you can also use a file .env, .env.development, or .env.production. These files could then be checked in.

Your .env file can contain global defaults (e.g. some config). With the others, you can override configs specific to that environment.

As opposed to the .env.local file, the other three would typically be checked in.

See their docs for more info.

Answered By - rethab

Answer Checked By - Candace Johnson (PHPFixing Volunteer)