How we rebuilt Next.js with AI in one week (새 탭에서 열림)
Cloudflare의 한 엔지니어가 AI 모델을 활용해 단 일주일 만에 Next.js를 Vite 기반으로 재구현한 'vinext'를 공개했습니다. vinext는 Next.js의 복잡한 빌드 아키텍처와 타 플랫폼 배포 시 발생하는 파편화 문제를 해결하기 위해 등장했으며, 기존 Next.js 코드를 그대로 유지하면서도 최대 4배 빠른 빌드 속도와 57%의 번들 크기 감소를 달성했습니다. 이는 AI를 활용해 기존 프레임워크의 API 표면을 완전히 새롭게 구현함으로써 서버리스 환경에서의 배포 효율성을 극대화한 사례입니다. ### 기존 Next.js 배포 및 개발 환경의 문제점 * Next.js는 Turbopack이라는 독자적인 툴체인을 사용하기 때문에, Cloudflare나 AWS Lambda 같은 서버리스 환경에 배포하려면 빌드 결과물을 해당 플랫폼에 맞게 재가공하는 복잡한 과정이 필요합니다. * 기존의 해결책인 OpenNext는 Next.js의 빌드 결과물을 역공학(Reverse-engineering)하여 대응해왔으나, 프레임워크 버전 업데이트 시 구조가 변경되면 대응이 늦어지거나 기능이 깨지는 등 취약한 구조를 가집니다. * 로컬 개발 환경은 Node.js에서 실행되는 반면 실제 배포는 에지 런타임에서 이루어지는 불일치 문제로 인해, Durable Objects나 AI 바인딩 같은 플랫폼 전용 API를 개발 단계에서 테스트하기가 매우 어렵습니다. ### Vite 기반의 완전한 재구현, vinext * vinext는 Next.js의 출력물을 수정하는 방식이 아니라, Vite 위에서 Next.js의 API 표면(라우팅, SSR, RSC, Server Actions, 미들웨어 등)을 처음부터 다시 구현한 클린 구현체입니다. * 사용자는 기존의 `app/`, `pages/` 디렉토리와 `next.config.js`를 그대로 사용할 수 있으며, 스크립트에서 `next`를 `vinext`로 바꾸는 것만으로 즉시 교체가 가능한 'Drop-in replacement' 형태를 지향합니다. * Vite의 환경 API(Environment API)를 활용하여 특정 플랫폼에 종속되지 않는 빌드 결과물을 생성하며, 향후 Rust 기반 번들러인 Rolldown이 도입되면 더 높은 성능 향상이 기대됩니다. ### 성능 지표 및 Cloudflare 최적화 기능 * 33개의 라우트를 포함한 앱 기준 벤치마크 결과, Next.js 16 대비 빌드 시간은 약 4배 단축되었고 클라이언트 번들 크기(Gzip 기준)는 57% 감소하는 성과를 보였습니다. * `vinext deploy` 명령어를 통해 소스 코드에서 Cloudflare Workers로 즉시 배포가 가능하며, Cloudflare KV를 활용한 캐시 핸들러를 통해 ISR(Incremental Static Regeneration) 기능을 기본적으로 제공합니다. * 개발 단계부터 실제 배포 환경과 동일한 `workerd` 런타임에서 앱이 구동되므로, 플랫폼 전용 기능을 별도의 워크아라운드 없이 로컬에서 완벽하게 테스트할 수 있습니다. ### 생태계 협력 및 향후 전망 * vinext 코드의 약 95%는 순수 Vite 기반으로 작성되어 있어 특정 호스팅 업체에 종속되지 않으며, Vercel을 포함한 타 플랫폼으로의 이식도 매우 용이한 구조입니다. * 현재 이 프로젝트는 실험적인 단계(Experimental)로 대규모 트래픽에서의 검증이 더 필요하지만, 이미 1,700개 이상의 테스트를 통과하며 안정성을 확보해 나가고 있습니다. * Cloudflare는 타 호스팅 제공업체들과 협력하여 이 툴체인을 확장할 계획이며, 오픈 소스 커뮤니티의 참여를 통해 다양한 배포 타겟을 확보하고자 합니다. **결론:** vinext는 현대적인 빌드 도구와 AI의 결합이 프레임워크의 구조적 한계를 얼마나 빠르게 극복할 수 있는지 보여주는 사례입니다. 성능 최적화와 서버리스 배포 편의성을 동시에 잡고자 하는 개발자들에게 유망한 대안이 될 것으로 보입니다.