CODEWITHSUNDEEP
githubnext.jsenvironment-variablesgithub-actions
hwang25
hwang25

Reputation: 47

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

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/[email protected]
        with:
          branch: gh-pages
          folder: output

Upvotes: 3

Views: 13421

Answers (2)

natterstefan
natterstefan

Reputation: 443

I had similar questions last week and came up with a solution that is somehow related to your problem.

GitHub Action: next-env

GitHub Action to read .env.[development|test|production][.local] files in Next.js (but also non Next.js) projects and add variables as secrets to GITHUB_ENV.

Technically it would load .env.local files as well, but as @rethab said, you should not check those files in. My action could help you load all the other checked-in .env files and require you only to add the ones from the git ignored .env.local as GitHub secrets in your GitHub repository.

By the way: despite the name, it also works in non-Next.js projects as it uses a decoupled package of the Next ecosystem.

Upvotes: 1

rethab
rethab

Reputation: 8403

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.

Upvotes: 1

Related Questions