▲
Next.js CI/CD with GitHub Actions
Set up a production-ready CI pipeline for your Next.js app. Includes linting, type checking, testing, and build verification.
.github/workflows/ci.yml
name: Next.js CI
on:
push:
branches: [main]
pull_request:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
cache: npm
- run: npm ci
- name: Lint
run: npm run lint
- name: Type Check
run: npx tsc --noEmit
- name: Build
run: npm run build
- name: Test
run: npm test -- --ci --coverageSetup Steps
- 1Create the workflow file at .github/workflows/ci.yml in your repository
- 2The workflow triggers on push to main and on all pull requests
- 3It uses Node.js 20 with npm caching for faster installs
- 4Four verification steps: lint → typecheck → build → test (in order)
- 5If any step fails, the workflow stops and reports the error
Common Pitfalls
- • Missing next.config.js — build will fail if your config has syntax errors
- • Environment variables — if your build needs .env vars, add them to GitHub Secrets and reference them
- • Image optimization — set 'images.unoptimized: true' for static exports or configure your image loader
- • API routes with database — add a PostgreSQL service container if your tests need a database
Pro Tips
- • Add 'cache: npm' to setup-node for 30-40% faster installs
- • Run typecheck BEFORE build — it's faster and catches errors earlier
- • Use 'npm test -- --ci' flag for non-interactive test runs in CI
- • Add Vercel/Netlify preview deploy action for PR previews
Automate This
CI setup done? WarpFix watches your pipeline 24/7 and auto-fixes failures — so you can ship faster.
WarpFix monitors your GitHub repos 24/7. When CI fails, it identifies the error, generates a fix, validates it in a sandbox, and opens a PR — automatically.
Install WarpFix — Free