CI/CD in Next.js with GitHub Actions

Run Next.js CI/CD in GitHub Actions with an encrypted .env.vault file

Find a complete code example on GitHub for this guide.

Initial setup

Create a Next.js application.

npx create-next-app@latest --example hello-world .

This will create a handful of files.

ls -1
README.md
next-env.d.ts
node_modules
package-lock.json
package.json
pages
tsconfig.json

Edit pages/index.tsx to include process.env.NEXT_PUBLIC_HELLO.

pages/index.tsx

export default function IndexPage() {
  return (
    <div>
      Hello {process.env.NEXT_PUBLIC_HELLO}.
    </div>
  )
}

Create .github/worksflows/ci.yml file.

.github/workflows/ci.yml

name: npm run build
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: actions/setup-node@v3
      with:
        node-version: 16
    - run: npm install
    - run: npm run build && cat .next/server/pages/index.html
      env:
        DOTENV_KEY: ${{ secrets.DOTENV_KEY }}

Commit that to code and push to GitHub.

Once pushed, the GitHub actions build contents will say 'Hello .' as it doesn't have a way to access the environment variable yet. Let's do that next.

github.com/you/app/actions

Preload dotenv

Install dotenv.

npm install dotenv --save # Requires dotenv >= 16.1.0

Create a .env file in the root of your project.

.env

# .env
NEXT_PUBLIC_HELLO="World"

Preload Next.js scripts using dotenv. This will inject environment variables ahead of Next.js.

package.json

"scripts": {
  "dev": "node -r dotenv/config ./node_modules/.bin/next",
  "build": "node -r dotenv/config ./node_modules/.bin/next build",
  "start": "node -r dotenv/config ./node_modules/.bin/next start"
},

Try running it locally.

npm run dev
# Visit http://localhost:3000

It will say 'Hello World'.

Great! process.env now has the keys and values you defined in your .env file.

That covers local simulation of the CI. Let's solve for the real CI environment next.

Build .env.vault

Push your latest .env file changes and edit your CI secrets. Learn more about syncing

npx dotenv-vault@latest push
npx dotenv-vault@latest open ci

Use the UI to configure the CI environment secrets.

dotenv.org

Then build your encrypted .env.vault file.

npx dotenv-vault@latest build

Its contents should look something like this.

.env.vault

#/-------------------.env.vault---------------------/
#/         cloud-agnostic vaulting standard         /
#/   [how it works](https://dotenv.org/env-vault)   /
#/--------------------------------------------------/

# development
DOTENV_VAULT_DEVELOPMENT="/HqNgQWsf6Oh6XB9pI/CGkdgCe6d4/vWZHgP50RRoDTzkzPQk/xOaQs="
DOTENV_VAULT_DEVELOPMENT_VERSION=2

# ci
DOTENV_VAULT_CI="x26PuIKQ/xZ5eKrYomKngM+dO/9v1vxhwslE/zjHdg3l+H6q6PheB5GVDVIbZg=="
DOTENV_VAULT_CI_VERSION=2

Build CI

Commit those changes safely to code and rerun the build.

That's it! On rerun, your .env.vault file will be decrypted and its CI secrets injected as environment variables – just in time.

You'll know things worked correctly when you see 'Loading env from encrypted .env.vault' in your logs. If a DOTENV_KEY is not set (for example when developing on your local machine) it will fall back to standard dotenv functionality.

github actions build

You succesfully used the new .env.vault standard to encrypt and deploy your secrets. This is much safer than scattering your secrets across multiple third-party platforms and tools. Whenever you need to add or change a secret, just rebuild your .env.vault file and redeploy.

Frameworks › Next.js