Tran Ngoc Minh DucVercel + GitLab: CI/CD for Next.js Portfolios
Combine GitLab for source control and optional CI checks with Vercel for zero-config Next.js deployment.
For personal sites and portfolios, Vercel + GitLab is a pragmatic split: GitLab owns the repo and quality gates; Vercel owns build and edge deployment for Next.js.
Workflow Diagram
Responsibility Split
| Layer | GitLab | Vercel |
|---|---|---|
| Git hosting | ✓ | |
| MR / code review | ✓ | |
| Lint & test CI | ✓ | |
| Next.js optimized build | ✓ | |
| CDN + SSL | ✓ | |
| Preview per branch | ✓ |
Avoid double deploy
Use GitLab CI for validation only (npm run lint, npm run build). Let Vercel handle production deploy — do not run two deploy pipelines to different platforms.
GitLab CI (validate only)
image: node:20
stages:
- test
cache:
key:
files:
- package-lock.json
paths:
- node_modules/
before_script:
- npm ci
lint:
stage: test
script:
- npm run lint
build:
stage: test
script:
- npm run build
rules:
- if: $CI_COMMIT_BRANCH == "dev"Vercel Configuration
| Setting | Value |
|---|---|
| Production branch | dev or main |
| Build command | npm run build |
| Framework | Next.js (auto-detected) |
| Env | NEXT_PUBLIC_SITE_URL |
Sequence: Push to Production
How to Draw Diagrams in MDX
This blog uses Mermaid via the <Mermaid> component. Paste diagram code inside a template literal:
<Mermaid chartId="mermaid-2" />Rendered result:
Syntax tips
Wrap diagram code in a template literal inside the Mermaid component. Curly braces like decision nodes {ok?} are safe inside backticks. Types: flowchart, sequenceDiagram, stateDiagram, and more.
When This Pattern Fits
- Personal blogs and portfolio sites
- Next.js App Router with MDX
- Small teams without Kubernetes overhead
- Need preview URLs for stakeholders
Conclusion
GitLab + Vercel gives you professional CI discipline without operating your own deployment platform. Keep CI fast, let Vercel specialize in Next.js delivery.
Related Articles
Trunk-Based Development with Modern CI/CD
Ship faster with short-lived branches, feature flags, and continuous integration on the main trunk.
Docker Multi-Stage Builds in CI/CD Pipelines
Shrink images, speed up pipelines, and improve security with multi-stage Dockerfiles in GitLab CI.
GitLab CI to Kubernetes: End-to-End Deploy Pipeline
Design a complete CI/CD pipeline from GitLab merge request to Kubernetes production with security gates and GitOps handoff.