이 영상은 개발자들 사이의 오랜 라이벌 관계, 특히 Vercel과 Cloudflare 간의 경쟁을 조명하며 시작합니다. 최근 Next.js 배포와 관련된 이 경쟁은 Cloudflare가 V-Next를 출시하면서 더욱 격화되었습니다.

V-Next는 기존 Next.js 앱의 배포 제약을 해결하기 위해 개발되었습니다. Next.js는 Vercel에 배포할 경우 라우팅, middleware, ISR, 이미지 최적화 등 모든 기능이 원활하게 작동하지만, Cloudflare나 Netlify와 같은 다른 플랫폼에 배포할 때는 제약이 있었습니다. 과거에는 이러한 문제를 OpenNext 프로젝트를 통해 우회했으나, 이는 next build의 출력물을 역설계하여 재패키징하는 방식이었기 때문에 Next.js 빌드 출력의 변경에 매우 취약하고 오류 발생 가능성이 높았습니다.

Cloudflare는 이러한 OpenNext의 한계를 극복하기 위해 근본적인 접근 방식을 택했습니다. 그들은 next build의 출력에 의존하는 대신, Next.js 프레임워크 자체를 Vit 위에 재구현(re-implementation)하는 V-Next를 개발했습니다. 이 아이디어는 과거에도 시도되었지만 성공하지 못했습니다. 하지만 이번에는 AI의 도움을 받아 단 하루 만에 기본적인 SSR, middleware, server actions, streaming 기능을 구현했으며, 3일 만에 완전한 client hydration과 Cloudflare Workers 배포까지 가능하게 되었습니다. 나머지 일주일 동안은 edge cases를 해결하고 테스트 스위트를 확장하며 Next.js API의 94% 커버리지를 달성했습니다. 이 모든 과정에 약 $1,100 상당의 AI tokens가 소요되었습니다. V-Next는 Vit 기반으로 구축되어 Rolldown(Rust 기반 bundler)과 같은 Vit의 아키텍처를 활용하여 향상된 성능을 제공합니다.

Vercel은 V-Next의 출시에 대해 부정적인 반응을 보였습니다. Vercel의 CTO는 V-Next를 "slop fork"라고 언급했으며, CEO인 Germo는 Cloudflare로의 마이그레이션 가이드를 트윗하며 V-Next에서 발견된 취약점을 지적했습니다.

영상의 저자는 V-Next의 실제 작동 여부를 테스트하기 위해 본인의 뉴스레터 웹사이트(byes.dev)를 사용하여 시연했습니다. 이 앱은 일반적인 Next.js 앱으로, 뉴스레터 가입 및 아카이브 기능을 포함하고 있습니다. 간단한 앱의 경우 package.json에서 next 명령어를 V-Next로 교체하는 것만으로 작동할 수 있지만, 해당 앱의 경우 Vit와의 호환성을 위해 일부 리팩토링이 필요했습니다. Cloudflare는 이러한 마이그레이션을 돕기 위해 agent tool을 제공했으며, 저자는 Cursor를 통해 이 도구를 사용했습니다. 이 에이전트는 package.json에 type: module을 추가하여 모든 JS 파일을 ES modules로 처리하게 하고, JSX가 포함된 JS 파일을 .jsx 확장자로 변경하는 등 Vit가 요구하는 사항에 맞춰 코드를 리팩토링했습니다. 비록 처음에는 완벽하지 않았지만, 몇 번의 시도 끝에 앱을 V-Next 기반으로 실행하는 데 성공했습니다.

결론적으로, 저자는 V-Next가 아직 프로덕션 환경에 바로 적용하기에는 "너무 이른" bleeding edge 소프트웨어라고 평가했습니다. 하지만 V-Next의 성능 향상 잠재력은 높이 평가했습니다. Cloudflare의 자체 벤치마크에 따르면 V-Next를 사용하면 프로덕션 빌드 시간이 Next.js 대비 최대 4.4배 빨라지고, 클라이언트 번들 크기는 57% 작아집니다. 이는 거의 전적으로 Vit와 Rolldown 덕분입니다. 저자의 자체 테스트에서도 빌드 시간이 5배 빨라지는 결과를 얻었습니다. 저자는 비록 현재로서는 프로덕션에 적용할 계획은 없지만, 몇 달 후에 다시 프로젝트를 확인할 가치가 있다고 언급했습니다.