Next.js를 AI로 일주일 만에 재구현한 방법

• vinext는 AI와 한 명의 엔지니어가 일주일 만에 만든 Next.js 호환 프레임워크로, Vite 기반에서 Cloudflare Workers에 한 줄 명령으로 배포 가능
• 빌드 속도는 최대 4.4배 빠르고, 클라이언트 번들 크기는 57% 작으며, 기존 Next.js 프로젝트와 동일한 디렉터리 구조와 설정을 그대로 사용
• Cloudflare Workers용으로 설계되어 KV 기반 ISR 캐싱, Traffic-aware Pre-Rendering 등 트래픽 기반 사전 렌더링 기능을 지원
• 전체 코드의 대부분이 AI가 작성되었으며, 1,700개 이상의 테스트와 자동화된 코드 리뷰를 통해 품질을 확보
• 이 프로젝트는 AI가 복잡한 프레임워크를 재구현할 수 있는 수준에 도달했음을 보여주는 사례로, 향후 소프트웨어 개발 구조 변화의 가능성을 제시

Next.js의 배포 한계와 문제 인식

• Next.js는 React 기반의 대표적 프레임워크이지만, 서버리스 환경 배포 시 복잡한 빌드 출력 변환 과정이 필요함
  • Cloudflare, Netlify, AWS Lambda 등으로 배포하려면 Next.js의 Turbopack 빌드 결과를 각 플랫폼에 맞게 재구성해야 함
• OpenNext가 이를 해결하려 했으나, Next.js 빌드 출력을 역공학해야 하는 구조적 한계로 인해 버전별 불안정성이 발생
• Next.js의 어댑터 API가 개발 중이지만, Node.js 전용 개발 서버 구조로 인해 플랫폼별 API 테스트가 어렵다는 제약 존재

vinext의 구조와 특징

• vinext는 Next.js의 API를 Vite 위에서 직접 재구현한 대체 프레임워크
  • npm install vinext 후 next 명령을 vinext로 교체하면 기존 프로젝트를 그대로 실행 가능
  • vinext dev, vinext build, vinext deploy 명령으로 개발, 빌드, 배포 일원화
• 라우팅, 서버 렌더링, React Server Components, 서버 액션, 캐싱, 미들웨어 등 Next.js의 주요 기능을 Vite 플러그인으로 구현
• Vite Environment API를 활용해 플랫폼 독립적인 빌드 결과를 생성

성능 벤치마크

• 33개 라우트를 가진 동일 앱으로 Next.js 16과 비교
  • 빌드 시간: vinext(Vite 8/Rolldown) 1.67초 → Next.js 대비 4.4배 빠름
  • 클라이언트 번들 크기: 72.9KB → Next.js 대비 57% 작음
• 테스트는 GitHub CI에서 수행되었으며, 컴파일 및 번들링 속도만 측정
• Vite 8의 Rust 기반 번들러 Rolldown이 빌드 성능 향상에 기여

Cloudflare Workers 배포

• vinext deploy 명령으로 자동 빌드 및 배포 수행
  • App Router, Pages Router 모두 지원하며, 클라이언트 하이드레이션 및 상태 관리 포함
• Cloudflare KV 캐시 핸들러를 통해 ISR(Incremental Static Regeneration) 기본 제공
  • 캐시 백엔드는 교체 가능하며, R2나 Cache API로 확장 가능
• 실제 동작 예시로 App Router Playground, Hacker News 클론 등 공개

Traffic-aware Pre-Rendering (TPR)

• 기존 Next.js의 generateStaticParams() 기반 정적 사전 렌더링의 비효율성을 개선
• Cloudflare의 트래픽 데이터를 활용해 최근 24시간 내 방문이 많은 페이지만 사전 렌더링
  • 예: 10만 페이지 중 184개(전체 트래픽의 90%)만 8.3초 내 렌더링
• 나머지 페이지는 요청 시 SSR 후 ISR 캐싱, 배포 시마다 트래픽 패턴에 따라 자동 갱신

AI 기반 개발 과정

• 프로젝트의 대부분 코드가 AI에 의해 작성, 총 비용 약 $1,100
• 1,700개 Vitest, 380개 Playwright 테스트를 통과하며 Next.js API의 94% 호환성 확보
• 개발 절차
  • AI가 기능 구현 및 테스트 작성 → 테스트 실행 → 실패 시 오류 피드백 후 재시도
  • AI 에이전트가 코드 리뷰와 수정까지 자동 수행, 사람은 방향과 구조만 관리
• OpenCode에서 800회 이상 세션 수행, Claude 모델 사용

AI가 가능하게 한 요인

• Next.js의 명확한 문서화와 방대한 테스트 스위트로 AI가 정확히 학습 가능
• Vite의 안정적 빌드 구조가 기반 역할 수행
• 최신 AI 모델이 대규모 코드베이스의 구조적 일관성 유지 및 모듈 간 상호작용 추론 가능 수준에 도달

소프트웨어 개발에 대한 시사점

• 기존의 다층적 프레임워크 구조는 인간의 인지 한계를 보완하기 위한 결과였음
• AI는 전체 시스템을 맥락 속에서 이해하고 직접 코드를 작성할 수 있어, 중간 추상화 계층의 필요성이 줄어듦
• vinext는 AI가 명세와 기반 도구만으로 복잡한 프레임워크를 완성할 수 있음을 입증한 사례

오픈소스 및 협업

• vinext의 약 95%는 Cloudflare 비의존적 Vite 코드로 구성되어, 다른 호스팅 플랫폼에서도 적용 가능
  • Vercel에서 30분 만에 PoC 구현 성공
• 오픈소스로 공개되어 있으며, 다른 플랫폼의 PR 및 배포 타깃 추가를 환영

실험적 상태 및 실제 적용

• vinext는 아직 실험 단계로, 대규모 트래픽 검증은 미완료
• National Design Studio가 정부 웹사이트 CIO.gov에 실제 적용 중이며, 빌드 시간과 번들 크기 개선 확인
• README에 지원하지 않는 기능과 알려진 제약사항 명시

사용 방법

• Agent Skill을 통해 AI 도구(Claude Code, Cursor 등)에서 자동 마이그레이션 지원
  • npx skills add cloudflare/vinext → “migrate this project to vinext” 명령으로 변환
• 수동으로는 npx vinext init, vinext dev, vinext deploy 명령으로 실행 가능
• 소스코드는 GitHub의 cloudflare/vinext에서 공개

감사 및 기반 기술

• Vite 팀의 지원과 @vitejs/plugin-rsc 덕분에 React Server Components 기능 구현 가능
• Next.js 팀의 문서화와 테스트 스위트가 프로젝트 성공의 핵심 기반으로 작용