How would you design a CI/CD pipeline for a Next.js application with automated testing and deployment?

Question

At a fast-moving startup:

> "We deploy by SSH-ing into the server and running `git pull && npm run build`. This week it broke production because a test was skipped. Design a proper CI/CD pipeline."

Interview OS Community · Accepted Answer

## CI/CD Pipeline Architecture

```
Push → GitHub Actions → Build → Test → Deploy
                              ↓
                        Staging (auto)
                              ↓
                        Production (manual approval)
```

## GitHub Actions Workflow

```yaml
# .github/workflows/deploy.yml
name: CI/CD Pipeline

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

jobs:
  # Stage 1: Lint & Type Check
  validate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npm run lint
      - run: npm run type-check

# Stage 2: Tests
  test:
    needs: validate
    runs-on: ubuntu-latest
    services:
      mongodb:
        image: mongo:7
        ports: ["27017:27017"]
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npm run test:unit
      - run: npm run test:e2e
        env:
          DATABASE_URL: mongodb://localhost:27017/test

# Stage 3: Build
  build:
    needs: test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npm run build
      - uses: actions/upload-artifact@v4
        with:
          name: build
          path: .next/

# Stage 4: Deploy to Staging (auto on develop)
  deploy-staging:
    needs: build
    if: github.ref == 'refs/heads/develop'
    runs-on: ubuntu-latest
    steps:
      - run: echo "Deploy to staging server"

# Stage 5: Deploy to Production (manual on main)
  deploy-production:
    needs: build
    if: github.ref == 'refs/heads/main'
    runs-on: ubuntu-latest
    environment: production  # Requires manual approval in GitHub
    steps:
      - run: echo "Deploy to production"
```

## Pipeline Best Practices

| Practice | Why |
|----------|-----|
| Fast feedback first (lint → test → build) | Fail fast, save compute |
| Service containers for DB | Real database for integration tests |
| Upload build artifacts | Don't rebuild in deploy step |
| Separate staging/prod | Catch environment issues |
| Manual prod approval | Human gate for production |
| Secrets via GitHub Secrets | Never commit credentials |

Loading Application

How would you design a CI/CD pipeline for a Next.js application with automated testing and deployment?

Question Details

Suggested Solution

CI/CD Pipeline Architecture

GitHub Actions Workflow

.github/workflows/deploy.yml

Pipeline Best Practices

Discussion (0)