Vinext — Vite 위에서 Next.js를 1주일 만에 다시 만든 이야기

Cloudflare가 Next.js를 Vite 위에서 처음부터 다시 구현했다. 단 1주일, 소요된 Claude API 비용 $1,100. 그 결과물이 오픈 소스로 공개된 Vinext다.

Vinext가 뭔가

Vinext는 "Vite 기반의 Next.js 드롭인 대체제"다. 기존 Next.js 프로젝트 코드를 수정하지 않고 Cloudflare Workers에 단 한 명령으로 배포할 수 있다.

기존 접근 방식과 다른 게 하나 있다. Next.js 출력물을 Cloudflare Workers에 맞게 변환하는 어댑터를 만드는 방식이 아니라, Next.js의 API 표면을 Vite 위에서 직접 재구현했다는 점이다. 비유하면, 기존 방식이 외국어 텍스트를 번역하는 방식이라면 Vinext는 같은 의미의 글을 처음부터 새 언어로 쓰는 방식이다.

지원하는 기능 범위가 넓다.

기능	지원 여부
App Router / Pages Router	✅ 모두 지원
React Server Components	✅ 지원
Server Actions	✅ 지원
파일시스템 라우팅 / 미들웨어	✅ 지원
ISR (via KV Cache Handler)	✅ 지원
Cloudflare Workers 직접 배포	✅ 지원
정적 프리렌더링 (빌드 타임)	❌ 미구현

현재 Next.js 16 API의 94%를 커버한다. CIO.gov 같은 프로덕션 환경에서도 이미 운용 중이다.

---

왜 이게 의미 있나

빌드 속도와 번들 크기 숫자가 먼저 눈에 띈다. Next.js 16.1.6 기준으로 측정한 수치다.

지표	Next.js	Vinext	차이
빌드 시간	7.38s	1.67s	4.4배 빠름
클라이언트 번들 (gzip)	168.9 KB	72.9 KB	57% 감소

Vite의 빠른 개발 서버와 Rolldown 기반 번들링이 그대로 적용되기 때문이다. Next.js가 자체 컴파일러 레이어를 쌓아온 것과 달리, Vinext는 Vite의 기존 최적화 파이프라인을 그대로 탄다.

[💡 잠깐! 이 용어는?] ISR (Incremental Static Regeneration): Next.js에서 특정 페이지를 주기적으로 재생성하는 기법. 정적 페이지의 성능과 동적 콘텐츠 갱신을 함께 잡는다. Vinext에서는 Cloudflare KV 캐시를 핸들러로 사용한다.

---

AI가 어떻게 이걸 만들었나

엔지니어 한 명이 AI 도구를 지휘해서 1주일에 완성했다. 프로세스 구조가 흥미롭다.

1. OpenCode 대화로 아키텍처 계획
2. AI가 태스크 단위로 기능 구현 + 테스트 작성
3. AI 기반 코드 리뷰 자동화 피드백 루프
4. 1,700개 유닛 테스트 + 380개 E2E 테스트로 품질 게이트 유지
5. 에이전트 기반 브라우저 테스트 도구로 UI 검증

[💡 잠깐! 이 용어는?] 드롭인 대체제(Drop-in Replacement): 기존 코드 변경 없이 다른 라이브러리/프레임워크로 교체 가능한 구현체. Next.js API를 그대로 노출하므로 기존 Next.js 코드를 수정 없이 Vinext로 전환할 수 있다.

왜 Next.js가 이 방식에 특히 적합했냐는 분석도 나온다. Next.js는 잘 문서화된 스펙과 방대한 테스트 스위트를 갖고 있다. AI가 "무엇을 구현해야 하는지"를 명확히 알 수 있는 기준이 있다는 뜻이다. 거기에 Vite라는 탄탄한 기반, 그리고 "모델이 따라잡았다"는 세 가지 조건이 맞아떨어진 결과라고 저자는 설명한다.

---

Traffic-aware Pre-Rendering

실험적 기능 하나가 눈길을 끈다. **TPR(Traffic-aware Pre-Rendering)**이다.

기존 SSG나 ISR이 "어떤 페이지를 미리 만들어둘지"를 미리 정해야 하는 방식이었다면, TPR은 실제 트래픽 패턴을 분석해서 자주 방문하는 페이지만 프리렌더링한다. 거대한 카탈로그 전체를 배포 시점에 빌드할 필요가 없어진다.

비유하면 편의점이 "이번 달 어떤 제품이 많이 팔릴지"를 미리 예측해서 미리 진열해두는 게 아니라, 실제 구매 데이터를 보고 잘 나가는 제품만 선반 앞에 배치하는 방식이다.

---

마무리

Vinext는 "AI와 함께 얼마나 빨리 복잡한 걸 만들 수 있나"라는 질문에 대한 구체적인 답이다. 1주일, $1,100, Next.js 16 API 94% 커버. 이게 실험이 아니라 프로덕션에서 운용 중이라는 점이 더 흥미롭다.

현재는 정적 빌드 타임 프리렌더링이 미구현인 한계가 있고, "실험적" 딱지가 붙어 있다. 하지만 Cloudflare Workers 배포를 고려하는 프로젝트에서는 이미 충분히 시험해볼 만한 옵션이 됐다.

---

참고:

• Vinext 발표 포스트: https://blog.cloudflare.com/vinext/