GitHub Actions: Automating CI/CD for a Next.js App

CI/CD sounds intimidating but GitHub Actions makes it surprisingly accessible. Here's exactly how I set up automated deployment for this portfolio.

The Goal

Every time I push to main:

1. Run linting
2. Build the project
3. Auto-deploy via Vercel

The Workflow File

Create .github/workflows/ci.yml:

name: CI/CD Pipeline

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

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
          cache: "npm"

      - name: Install dependencies
        run: npm ci

      - name: Run linting
        run: npm run lint

      - name: Build project
        run: npm run build

Adding Secrets

For anything sensitive (API keys, tokens), use GitHub Repository Secrets:

1. Go to Settings → Secrets and Variables → Actions
2. Click New repository secret
3. Add your variables like MONGO_URI, VERCEL_TOKEN

Then reference them in the workflow:

env:
  MONGO_URI: ${{ secrets.MONGO_URI }}

Vercel Auto-Deploy

If you connect your GitHub repo directly to Vercel, it handles deployment automatically on every push to main. No workflow step needed.

For a custom deploy step:

- name: Deploy to Vercel
  uses: amondnet/vercel-action@v25
  with:
    vercel-token: ${{ secrets.VERCEL_TOKEN }}
    vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
    vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
    vercel-args: "--prod"

Key Takeaways

• npm ci is faster and more reliable than npm install in CI environments
• Use cache: 'npm' to speed up subsequent runs significantly
• Keep secrets in GitHub, never in code
• Matrix builds let you test across multiple Node versions simultaneously