Vercel은 프론트엔드 프레임워크(특히 Next.js)에 최적화된 클라우드 배포 플랫폼이다. Git 연동 자동 배포, 글로벌 CDN, 서버리스 함수, Edge Functions를 제공한다.
핵심 기능
| 기능 | 설명 |
|---|
| 자동 배포 | Git push 시 자동 빌드·배포 |
| Preview Deployments | PR마다 고유 URL 생성 |
| Edge Network | 전 세계 CDN 자동 배포 |
| Serverless Functions | /api 라우트 자동 배포 |
| Edge Functions | 엣지에서 실행되는 경량 함수 |
| Analytics | 웹 바이탈·성능 분석 |
vercel.json 설정
json
{
"buildCommand": "npm run build",
"outputDirectory": ".next",
"framework": "nextjs",
"headers": [
{
"source": "/api/(.*)",
"headers": [
{ "key": "Cache-Control", "value": "no-store" }
]
}
],
"redirects": [
{
"source": "/old-path",
"destination": "/new-path",
"permanent": true
}
],
"env": {
"DATABASE_URL": "@database-url"
}
}
Edge Middleware 예시
typescript
// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const token = request.cookies.get('auth-token');
if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();
}
export const config = {
matcher: ['/dashboard/:path*'],
};
| 항목 | Vercel | Netlify | Render |
|---|
| Next.js 최적화 | 최고 | 좋음 | 보통 |
| 무료 플랜 | 충분 | 충분 | 제한적 |
| Edge Functions | 지원 | 지원 | 미지원 |
| 빌드 시간 | 빠름 | 빠름 | 보통 |
| 가격 (Pro) | $20/월 | $19/월 | $7/서비스 |
관련 문서