Vercel에서 Cloudflare Workers OpenNext로 전환: 월 $1,000+ 서버리스 요금 90% 절감

스타트업의 성장을 가로막는 Vercel 청구서 폭탄

Next.js는 현재 Web 프론트엔드 및 풀스택 프레임워크의 압도적인 표준이다. 그리고 대부분의 개발팀은 Next.js를 만든 Vercel 플랫폼에서 프로젝트를 시작한다.

Vercel의 개발자 경험(DX)은 훌륭하다. Git push 한 번으로 무중단 배포가 완료되고, 프리뷰 URL이 생성되며, 이미지 최적화와 ISR(Incremental Static Regeneration)이 별도 설정 없이 작동한다.

그러나 프로젝트가 성장하고 월간 활성 사용자(MAU)가 급증하거나 트래픽이 폭발하는 순간, Vercel은 **“가장 치명적인 클라우드 요금 폭탄”**으로 변모한다.

[Vercel Pro Plan 기본료: $20/월]
   + Fast Data Transfer (Egress): GB당 $0.15 (1TB 전송 시 $150)
   + Serverless Execution (GB-hours): 초과 시 $0.18/GB-hr
   + Image Optimization: 5,000장 초과 시 1,000장당 $5
   + Build Minutes: 기본 한도 초과 시 1,000분당 $20
---------------------------------------------------
실제 월 청구서: $1,250 ~ $3,500+ /월

특히 Vercel의 Egress(데이터 아웃바운드) 비용과 이미지 최적화 요금은 바이럴 마케팅이나 트래픽 급증 시 순식간에 수천 달러의 우발적 청구서를 발생시킨다.

이 문제를 해결하기 위해 2025/2026년 오픈소스 생태계가 제시한 완성형 해답이 바로 OpenNext다. OpenNext를 사용하면 Vercel 벤더 락인 없이 Next.js 앱을 Cloudflare Workers의 에지 서버리스 인프라에 배포할 수 있으며, 동일한 트래픽에서 월 클라우드 비용을 90% 이상 절감할 수 있다.

이 글에서는 Vercel과 Cloudflare의 항목별 실제 비용 비교부터, OpenNext (@opennextjs/cloudflare) 아키텍처 및 마이그레이션 단계, Node.js API 호환성 처리, 그리고 실전 트러블슈팅까지 상세히 다룬다.

Vercel vs Cloudflare Workers 상세 비용 비교

동일한 서비스 규모(월간 5,000만 페이지뷰, 2TB 트래픽, 이미지 50,000장 최적화)를 기준으로 두 플랫폼의 월 청구서를 비교해보자.

Cloudflare는 Egress(네트워크 전송료)가 $0이라는 파격적인 정책을 유지하고 있으며, 서버리스 실행 비용도 Vercel 대비 10분의 1 수준이다. OpenNext로 이관하는 순간 인프라 요금 걱정 없이 마음껏 서비스를 스케일업할 수 있게 된다.

OpenNext 동작 원리: Next.js를 에지 런타임으로 이식하기

Next.js는 내부적으로 Node.js 런타임 환경과 Vercel 독자 프록시에 강하게 결합되어 있다. OpenNext는 Next.js 빌드 산출물(.next)을 분석하여 이를 플랫폼 독립적인 표준 자바스크립트 및 에지 서버리스 코드(workerd 호환)로 트랜스파일해주는 어댑터 레이어다.

[Next.js App Router 프로젝트]
       |
       v  `npx opennextjs-cloudflare`
+----------------------------------------------------------------+
| OpenNext 번들링 엔진                                            |
|                                                                |
|  ├── Server Bundle  --> Cloudflare Workers (workerd V8 Isolate)|
|  ├── Static Assets  --> Cloudflare Workers Static Assets / R2  |
|  └── Image Optimizer--> Cloudflare Image Resizing / Worker     |
+----------------------------------------------------------------+
       |
       v  `npx wrangler deploy`
[Cloudflare 300+ 글로벌 에지 네트워크 배포 완료]

OpenNext가 지원하는 Next.js 기능

• App Router & Pages Router 완전 지원
• Server Components (RSC) & Streaming 렌더링
• Server Actions & Route Handlers (POST/GET API)
• ISR (Incremental Static Regeneration) 및 Revalidation (revalidatePath, revalidateTag)
• Next.js Image Component (<Image />) 자동 최적화

1단계: 마이그레이션 전 프로젝트 호환성 체크

Next.js 앱을 Cloudflare Workers로 옮기기 전, 에지 런타임 특성상 점검해야 할 3가지 요소가 있다.

1. Node.js 네이티브 C++ 바인딩 지우기

Cloudflare Workers는 V8 격리 런타임(workerd)에서 동작하므로 Node.js의 fs, child_process, 또는 sqlite3처럼 C++ 네이티브 모듈에 의존하는 라이브러리는 사용할 수 없다.

• bcrypt -> bcryptjs 또는 Web Crypto API (crypto.subtle)로 대체
• jsonwebtoken -> jose 또는 hono/jwt로 대체
• pg / mysql2 -> pg (Node-compat 호환 모드) 또는 Cloudflare Hyperdrive / Drizzle ORM으로 대체

2. nodejs_compat 환경 깃발 확인

OpenNext 2025/2026 최신 버전은 Cloudflare의 nodejs_compat 호환성 플래그를 사용하여 Buffer, process, AsyncLocalStorage, stream 등 대부분의 Node.js 핵심 API를 기본 지원한다.

2단계: @opennextjs/cloudflare 설치 및 설정

기존 Next.js 프로젝트 루트 디렉터리에서 설치를 진행한다.

패키지 설치

# OpenNext Cloudflare 어댑터 및 Wrangler 설치
npm install --save-dev @opennextjs/cloudflare wrangler@latest

open-next.config.ts 작성

프로젝트 루트에 OpenNext 설정 파일(open-next.config.ts)을 작성한다.

// open-next.config.ts
import type { OpenNextConfig } from "@opennextjs/aws/types/open-next.js";
import cache from "@opennextjs/cloudflare/kv-cache";

const config: OpenNextConfig = {
  default: {
    override: {
      wrapper: "cloudflare-node",
      converter: "edge",
      // ISR 및 캐싱을 위한 Cloudflare KV 바인딩 연결
      incrementalCache: async () => cache,
      tagCache: async () => cache,
      queue: "dummy",
    },
  },
  middleware: {
    external: true,
    override: {
      wrapper: "cloudflare-edge",
      converter: "edge",
    },
  },
};

export default config;

wrangler.jsonc 작성

Cloudflare 배포용 wrangler.jsonc 파일에 Workers 및 KV 캐시 설정을 추가한다.

// wrangler.jsonc
{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "my-nextjs-app",
  "main": ".open-next/worker.js",
  "compatibility_date": "2026-01-01",
  "compatibility_flags": ["nodejs_compat"],

  // Next.js 정적 자산(CSS, JS, Images)을 Workers Static Assets로 서빙
  "assets": {
    "directory": ".open-next/assets",
    "binding": "ASSETS"
  },

  // ISR 캐시 보관용 KV 네임스페이스
  "kv_namespaces": [
    {
      "binding": "NEXT_CACHE_WORKERS_KV",
      "id": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
    }
  ],

  // DB 연동 시 Smart Placement 및 Hyperdrive 설정
  "placement": {
    "mode": "smart"
  }
}

3단계: 로컬 빌드 및 배포 파이프라인

package.json 스크립트를 수정하여 OpenNext 빌드와 Wrangler 배포를 연동한다.

// package.json
{
  "name": "my-nextjs-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "build:worker": "opennextjs-cloudflare build",
    "preview": "opennextjs-cloudflare build && wrangler dev",
    "deploy": "opennextjs-cloudflare build && wrangler deploy"
  }
}

로컬 프리뷰 테스트

배포 전 로컬 환경에서 Cloudflare workerd 런타임 기반으로 Next.js가 정상 동작하는지 테스트한다.

npm run preview

터미널에 로컬 주소(http://localhost:8787)가 표시되면 브라우저에서 Server Actions, 라우팅, SSR 페이지 렌더링이 문제없이 동작하는지 확인한다.

Cloudflare 배포 실행

npm run deploy

단 30초 만에 Next.js 프로젝트 전체가 Cloudflare 전 세계 300개 에지 노드로 배포된다!

4단계: GitHub Actions CI/CD 자동화 파이프라인

Vercel의 자동 배포 기능을 대체하기 위해 GitHub Actions 파이프라인을 구축한다.

# .github/workflows/deploy.yml
name: Deploy Next.js to Cloudflare Workers

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: Build & Deploy
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: "npm"

      - name: Install Dependencies
        run: npm ci

      - name: Build OpenNext Worker
        run: npm run build:worker

      - name: Deploy to Cloudflare Workers
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: deploy

이 파이프라인을 구축하면 Vercel Pro Plan의 빌드 시간 한도 제약 없이 GitHub Actions의 무료 빌드 분량을 활용하여 $0 비용으로 자동 배포 시스템을 완성할 수 있다.

실전 트러블슈팅: 자주 발생하는 마이그레이션 오류

오류 1: Dynamic Code Evaluation (eval) is not allowed

원인: 일부 패키지(예: 오래된 ORM이나 템플릿 엔진)가 내부적으로 eval() 또는 new Function()을 사용하는 경우 workerd 보안 정책에 걸린다.

해결책: next.config.js에 Webpack 타겟 및 린트 설정을 추가하거나 최신 모듈로 업데이트한다.

// next.config.js
module.exports = {
  webpack: (config, { isServer }) => {
    if (isServer) {
      config.ignoreWarnings = [{ module: /node_modules/ }];
    }
    return config;
  },
};

오류 2: ISR revalidatePath가 동작하지 않음

원인: KV 네임스페이스 바인딩 이름이 OpenNext 예상 명칭과 일치하지 않음.

해결책: wrangler.jsonc에서 kv_namespaces의 binding 이름을 반드시 NEXT_CACHE_WORKERS_KV로 지정한다.

오류 3: 환경 변수(process.env) 미인식

원인: Cloudflare Workers는 빌드 타임 주입 환경 변수와 런타임 환경 변수를 구분한다.

해결책: .env 파일의 변수 중 클라이언트에 노출될 변수는 NEXT_PUBLIC_ 접두사를 붙이고, 서버 전용 보안키는 wrangler secret put 명령어로 주입한다.

npx wrangler secret put DATABASE_URL

마이그레이션 성공 사례: 비용 절감 리포트

실제 B2B SaaS 서비스를 제공하는 테크 기업 A사의 Vercel -> Cloudflare Workers OpenNext 마이그레이션 리포트 결과다.

[마이그레이션 전: Vercel Enterprise/Pro]
- 월 평균 요청 수: 8,500만 건
- 월 평균 Egress 트래픽: 4.2 TB
- 이미지 최적화: 120,000장
- 월 청구액: $2,840.00 / 월

[마이그레이션 후: Cloudflare Workers + R2]
- Workers Paid 기본료: $5.00
- 추가 요청 수 수수료: $22.50
- Egress 트래픽 수수료: $0.00 (무료)
- R2 Storage & Image Resizing: $12.00
- 월 청구액: $39.50 / 월

=> 총 비용 절감율: 98.6% ($2,840 -> $39.50)

A사는 인프라 유지 비용을 98% 이상 절감하면서도, Cold Start 지연시간이 기존 Vercel 대비 250ms에서 12ms로 줄어드는 성능 향상까지 거둘 수 있었다.

결론: 벤더 락인에서 벗어나는 스마트한 선택

Vercel은 초기 아이디어를 빠르게 프로토타이핑하기에 최적의 플랫폼이다. 그러나 서비스가 성장하고 트래픽이 본격화되는 단계에서 Vercel의 비싼 가격 정책을 고수하는 것은 기업의 재무 건전성에 치명적인 부담을 준다.

OpenNext와 Cloudflare Workers 조합은 다음과 같은 강력한 이점을 선사한다:

1. Next.js 코드 100% 재사용: App Router, Server Actions, ISR 등 핵심 기능 완벽 유지
2. 트래픽 요금 $0 (Egress Free): 아무리 많은 사용자가 접속해도 네트워크 전송료 폭탄이 없음
3. 글로벌 에지 렌더링: 전 세계 300개 도시 에지 노드에서 10ms 미만 Cold Start로 즉시 응답

지금 바로 소규모 서브 프로젝트부터 OpenNext 마이그레이션을 시도해보고, 월 청구서가 90% 이상 줄어드는 놀라운 인프라 혁신을 경험해보자.

관련 글: Drizzle ORM + Cloudflare D1: 번들 99% 절감 에지 SQLite 아키텍처에서 에지 데이터베이스 구축 가이드도 함께 확인할 수 있다.