Cloudflare의 vinext: Vite 위에 AI로 구축된 Next.js 호환 프레임워크

vinext란 무엇인가

vinext(발음은 "vee-next")는 Vite 기반으로 구축된 Next.js의 드롭인 대체제로, 단일 명령어로 Cloudflare Workers에 배포됩니다. 한 명의 엔지니어와 AI 모델이 약 1,100달러 상당의 토큰으로 일주일 만에 처음부터 재구축했습니다.

vinext가 해결하는 배포 문제

Next.js는 서버리스 생태계에서 배포에 어려움이 있습니다. OpenNext와 같은 도구들이 Next.js 출력을 Cloudflare, Netlify 또는 AWS Lambda와 같은 플랫폼에 맞게 조정하기 위해 존재하지만, 이들은 Next.js의 빌드 출력을 역공학해야 하므로 버전 간에 깨지기 쉬운 구현으로 이어집니다. Next.js의 어댑터 API는 아직 초기 단계이며 개발 시 문제를 해결하지 못합니다 - next dev는 Node.js에서만 독점적으로 실행되므로 개발 중에 Durable Objects, KV 또는 AI 바인딩과 같은 플랫폼별 API를 테스트할 수 없습니다.

vinext의 작동 방식

Next.js 출력을 조정하는 대신, vinext는 Next.js API 표면을 Vite 플러그인으로 직접 재구현합니다. 여기에는 라우팅, 서버 렌더링, React 서버 컴포넌트, 서버 액션, 캐싱 및 미들웨어가 포함됩니다. Vite의 Environment API는 출력이 모든 플랫폼에서 실행될 수 있도록 합니다.

설정은 간단합니다:

npm install vinext

스크립트에서 next를 vinext로 대체하면서 app/, pages/ 및 next.config.js는 변경하지 않고 유지합니다.

명령어:

• vinext dev - HMR이 포함된 개발 서버
• vinext build - 프로덕션 빌드
• vinext deploy - 빌드 및 Cloudflare Workers에 배포

성능 벤치마크

벤치마크는 공유된 33-라우트 App Router 애플리케이션을 사용하여 vinext와 Next.js 16을 비교하며, Vite의 동작과 일치시키기 위해 Next.js 빌드에서 TypeScript 타입 검사와 ESLint를 비활성화했습니다.

프로덕션 빌드 시간:

• Next.js 16.1.6 (Turbopack): 7.38s 기준
• vinext (Vite 7 / Rollup): 4.64s (1.6배 더 빠름)
• vinext (Vite 8 / Rolldown): 1.67s (4.4배 더 빠름)

클라이언트 번들 크기 (gzipped):

• Next.js 16.1.6: 168.9 KB 기준
• vinext (Rollup): 74.0 KB (56% 더 작음)
• vinext (Rolldown): 72.9 KB (57% 더 작음)

이 벤치마크는 컴파일 및 번들링 속도를 측정하며, 프로덕션 서빙 성능은 아닙니다. 테스트는 단일 33-라우트 앱을 사용하며, 모든 프로덕션 애플리케이션의 대표적인 샘플은 아닙니다.

현재 상태

Cloudflare는 이미 vinext를 프로덕션에서 실행하는 고객을 보유하고 있습니다. 전체 방법론과 역사적 결과는 공개되어 있습니다.