GitHub Actions ile Next.js için Sıfır-Downtime CI/CD

Bir kişilik portfolyo sitesinin bile CI/CD pipeline'ı olması gerektiğine inanıyorum. Bu yazıda, Next.js projem için GitHub Actions'ta kurduğum ve çalıştırdığım pipeline'ı paylaşıyorum.

Pipeline özeti

PR açıldı → lint → typecheck → vitest → preview deploy (Vercel)
     ↓
PR merge → build → Lighthouse CI → eşik aşıldıysa fail → prod deploy

Workflow dosyası

# .github/workflows/ci.yml
name: CI
on:
  pull_request:
  push:
    branches: [main]

jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
        with: { version: 9 }
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: pnpm
      - run: pnpm install --frozen-lockfile
      - run: pnpm lint
      - run: pnpm typecheck
      - run: pnpm test -- --run

Lighthouse CI

Ayrı bir job:

  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
      - uses: actions/setup-node@v4
      - run: pnpm install --frozen-lockfile && pnpm build
      - name: Run Lighthouse
        uses: treosh/lighthouse-ci-action@v11
        with:
          urls: |
            http://localhost:3000/
            http://localhost:3000/blog
          budgetPath: ./lighthouse-budget.json
          uploadArtifacts: true

Lighthouse budget

[{
  "path": "/*",
  "resourceSizes": [
    { "resourceType": "script", "budget": 100 },
    { "resourceType": "total", "budget": 250 }
  ],
  "timings": [
    { "metric": "interactive", "budget": 3000 },
    { "metric": "first-contentful-paint", "budget": 1500 }
  ]
}]

Deploy

Vercel için en kolay yol: Vercel GitHub App'i kurmak. PR açıldığında otomatik preview URL'i yorum olarak düşüyor, merge olduğunda prod'a gidiyor.

Öğrendiğim dersler

1. Lint + typecheck hızlı bitsin diye ayrı job yap. Test job'undan sonra değil, paralel çalıştır.
2. Cache'le. pnpm cache ve ~/.next/cache adımları, toplam süreyi 4 dakikadan 1.5 dakikaya indirdi.
3. Lighthouse'u prod'a karşı çalıştırma. Local build + pnpm start üzerinden çalıştır, daha tutarlı sonuç verir.

Toplam PR feedback süresi: 90 saniye. PR'ı merge ettiğim anda prod'da.