- 공유 링크 만들기
- X
- 이메일
- 기타 앱
- 공유 링크 만들기
- X
- 이메일
- 기타 앱
Next.js
Cloudflare
마이그레이션 가이드
Next.js Vercel → Cloudflare
옮길 때 꼭 확인할 체크리스트 2026
Pages vs Workers
도메인 이전
실수 5가지
이전 순서
dev.Jake
Vercel에서 Cloudflare로 옮긴다고 하면 많은 팀이 먼저 Pages를 봅니다. 그런데 이 접근은 절반만 맞습니다. Cloudflare 공식 문서는 정적 Next.js는 Pages, 풀스택 Next.js는 Workers로 분리해서 안내합니다. "Cloudflare로 옮길까?"가 아니라 "우리 앱의 어느 부분이 Pages에 맞고, 어느 부분이 Workers가 필요한가?"를 먼저 따져야 합니다.
🔀 Pages vs Workers: 먼저 나눠야 할 것
Cloudflare의 Vercel → Pages 마이그레이션 문서는 명확합니다. "Vercel의 serverless functions는 Cloudflare Pages에서 현재 지원되지 않습니다"라고 적고 있습니다. 반면 Workers용 Next.js 가이드는 App Router, Pages Router, Route Handlers, SSR, ISR, Middleware, Server Actions 대부분을 지원한다고 안내합니다.
| 현재 앱 특성 | 추천 대상 | 근거 |
|---|---|---|
| 정적 export만 사용 | Pages | 정적 배포 경로 별도 제공 |
| SSR, ISR, Route Handlers 사용 | Workers | 대부분 기능 지원 명시 |
| Vercel Serverless Functions 의존 | Pages 단독 부적합 | 공식 문서에서 미지원 명시 |
| 루트 도메인 무중단 이전 필요 | DNS 계획 선행 | 네임서버 전환 절차 필요 |
⚠️ 이전 시 실수하는 5가지
1. Pages가 Vercel의 완전한 대체라고 생각합니다
가장 흔한 실수입니다. Pages는 정적 사이트에 적합하지만, Vercel serverless functions를 그대로 가져오는 대상이 아닙니다. 이전 설계 시 정적 자산/서버 렌더링/API/이미지 처리를 먼저 분리해야 합니다.
2. 정적 export와 SSR 앱을 같은 방식으로 이전합니다
Cloudflare는 이미 경로를 나눠놓았습니다. "일단 Pages에 올려보자"로 가면 빌드는 되더라도 런타임 단계에서 다시 구조를 손봐야 할 가능성이 큽니다.
3. 커스텀 도메인을 DNS 레코드만 바꾸면 끝이라고 생각합니다
대시보드에서 도메인을 먼저 연결하지 않고 CNAME만 수동 추가하면 522 오류가 날 수 있습니다. 루트 도메인은 네임서버를 Cloudflare로 전환해야 하고, 서브도메인은 CNAME 방식이 가능합니다.
4. 비용 계산에서 Workers를 빺말읍니다
Pages Functions는 Workers로 과금됩니다. Pages를 쓴다고 서버 코드 비용이 사라지지 않습니다. 마이그레이션 계획에 Workers 사용량 가정을 함께 포함해야 합니다.
5. 제한값을 확인하지 않고 그대로 옮깁니다
Pages Free: 월 500회 빌드, 사이트당 20,000개 파일, 파일당 25 MiB 제한. Workers Free: 일 100,000 요청, CPU time 10ms 제한. 이미지 파일이 많거나 빌드가 잦으면 무료 한도를 금방 초과합니다.
🛠️ 실전 이전 순서
- 앱 기능 분류: 정적 페이지, SSR, ISR, API, 이미지 최적화, 미들웨어를 구분합니다
- 런타임 결정: 정적이면 Pages, 서버 실행이 있으면 Workers 후보로 설정합니다
- 빌드 정보 확보: Vercel 프로젝트의 Build Command와 Output Directory를 확인합니다
- 도메인 이전 계획 수립: 루트 도메인과 서브도메인 절차를 분리합니다
- 비용·제한 검토: Pages 빌드 횟수, 파일 수, Workers 요청과 CPU 시간을 확인합니다
- 점진 전환: 프리뷰 도메인에서 검증 후 루트 도메인으로 이전합니다
📋 마이그레이션 판단표
| 질문 | Yes면 | No면 |
|---|---|---|
| 정적 export만으로 서비스 가능한가? | Pages 우선 검토 | Workers 검토 |
| SSR, ISR, Route Handlers가 핵심인가? | Workers 적합 | Pages 가능 |
| 루트 도메인을 바로 붙여야 하나? | DNS 계획 선행 | 서브도메인 시범 가능 |
| 서버 코드 비용을 낮게 유지해야 하나? | Workers 사용량 계산 필수 | Pages 전환 검토 가능 |
🏆 핵심 정리
- 정적 Next.js → Cloudflare Pages (단순, 무료 대역폭 무제한)
- 풀스택 Next.js (SSR/ISR/API) → Cloudflare Workers (대부분 기능 지원)
- Vercel Serverless Functions → Pages 단독 부적합, Workers로 전환 필요
- 루트 도메인 이전 → 네임서버 전환 계획 선행 필수
- 이전 전 반드시 → 빌드 횟수·파일 수·Workers CPU time 제한 확인
Pages vs Workers 선택 기준
Cloudflare Pages는 정적 사이트와 SSR을 모두 지원하는 엣지 배포 서비스로, Next.js 프로젝트를 손쉽게 배포할 수 있습니다. 자동 빌드, 미리보기 배포, 원자적 배포(atomic deployment) 등의 기능으로 높은 신뢰성을 제공합니다. Workers는 더 세밀한 제어가 필요한 경우 사용하며, 복잡한 미들웨어, 이미지 최적화, 동적 요청 처리 등을 커스텀할 수 있습니다. Pages 기반으로 시작하되, 특정 엔드포인트나 로직에서 Workers가 필요하다면 Pages Functions를 사용하거나 Workers로 확장할 수 있습니다. 대부분의 Next.js 프로젝트는 Pages만으로 충분하며, 성능 최적화나 복잡한 백엔드 로직이 필요할 때만 Workers를 추가로 구성합니다.
환경 변수 처리 및 보안
Cloudflare Pages에서 Next.js를 배포할 때 환경 변수는 Build settings와 Environment variables 탭에서 설정합니다. .env.production 파일은 레포지토리에 포함되지 않아야 하며, 민감한 정보는 반드시 Cloudflare 대시보드에서 설정해야 합니다. 선택 시 초기 단순성과 향후 확장성을 균형 있게 고려하는 것이 중요합니다.
❓ 자주 묻는 질문 (FAQ)
Q. Vercel 앱을 Cloudflare Pages로 바로 옮길 수 있나요?
정적 자산 중심 앱이라면 가능합니다. 하지만 서버 코드가 있으면 Pages가 아니라 Workers까지 함께 검토해야 합니다.
Q. Next.js App Router도 Cloudflare Workers에서 동작하나요?
Cloudflare Workers의 Next.js 가이드는 App Router, Route Handlers, SSR, ISR, Middleware 등 대부분을 지원한다고 명시합니다.
Q. 도메인 이전은 어떻게 하는 게 가장 안전한가요?
프리뷰/서브도메인에서 검증 후 대시보드에서 도메인 연결, 루트 도메인 전환 순서를 권장합니다.
🔗 관련 글
- Vercel vs Cloudflare Pages vs Netlify 비교 2026
- Firebase Hosting vs App Hosting 차이 2026
- 내 프론트엔드 스택 2026
| 항목 | ||
|---|---|---|
| 배포 | Pages (간편) | Pages (간편) |
| 성능 | 매우 빠름 | 매우 빠름 |
| 확장성 | 높음 | 높음 |
| 비용 | 저렴 | 저렴 |
댓글
댓글 쓰기