▲

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

 (blog.cloudflare.com)
1P by GN⁺ 10시간전 | ★ favorite | 댓글 1개
  • 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 팀의 문서화와 테스트 스위트가 프로젝트 성공의 핵심 기반으로 작용
▲
GN⁺ 10시간전  [-]
Hacker News 의견들

  • 한 달 전만 해도 “AI가 상용급 소프트웨어를 만든 사례를 하나만 보여달라”는 말을 들었는데, 이제는 Cloudflare가 여러 예시를 공개했고, 어제는 Ladybird가 AI로 Rust로 포팅되었음
    이런 사례들의 공통점은 테스트 스위트가 잘 갖춰져 있어서 작업이 단순해졌다는 점임
    어쩌면 AI 덕분에 테스트 주도 개발(TDD) 이 다시 부활할지도 모르겠음

  • 나는 Next를 정말 좋아하지만 Vite도 사랑함
    그런데 Next 팀은 전체 사용자 중 0.1%만을 위한 기능에 집중하고, 나머지 99.9%는 무시하는 느낌임
    Cloudflare의 이번 포크는 그런 불만을 해소해줄 수 있을 것 같음. 성능 개선은 Next 커뮤니티가 오랫동안 원하던 부분이었는데, Next 팀은 무시했고 Cloudflare는 그걸 해결하려고 함
    Vite가 Next보다 훨씬 나은 코어 레이어를 제공하면서도 Next의 기능을 유지한다는 점이 마음에 듦
    이 포크가 성공해서 회사에서도 쓸 수 있기를 바람

    • Next는 내가 써본 프레임워크 중 Rails 다음으로 최악이었음. 대부분의 앱에는 불필요한 오버헤드임
    • 한 명의 엔지니어가 여가 시간에 만든 실험적인 프로젝트에서 장기적인 지원을 기대할 수 있을까 의문임
    • 우리 회사에는 7년 넘은 Next.js 앱들이 있는데, 여전히 잘 돌아감에도 불구하고 Next 팀이 이유 없이 구조를 바꾸고, 지원 종료로 인해 리팩터링을 반복해야 했음
    • Next의 어떤 점을 좋아하는지 궁금함. Vercel과의 통합이 핵심 가치라면, 그걸 제외하고 Next를 선택할 이유가 있을까 생각함
    • 나는 Next를 싫어하고 Vite를 사랑함. 회사의 대규모 프로덕션 앱이 Next.js로 되어 있는데, 컴파일 속도가 너무 느려서 M4 Pro로 업그레이드해야 했음. Next 팀은 항상 “문서를 보라”는 식으로 회피함. 프레임워크 자체가 느림

  • 이번 사례는 AI 시대의 오픈소스 인센티브를 잘 보여줌
    문서를 잘 만들고 계약을 명확히 정의할수록, 다른 사람이 그걸 복제하기 쉬워짐
    Cloudflare가 Next의 테스트를 활용하지 않았다면 이런 결과는 불가능했을 것임
    Next는 점진적으로 성장하며 복잡해졌지만, 새 프레임워크는 처음부터 서버 컴포넌트를 단순화할 수 있음
    이미 미국 정부 사이트에서도 사용 중이라 놀라움

    • 한 조직이 API 실험과 베스트 프랙티스를 정립하면, 다른 조직이 그걸 그대로 가져가는 구조임
      Vercel이 자초한 결과이긴 하지만, 이런 흐름이 소규모 오픈소스 프로젝트에는 위협이 될 수 있음
    • Cloudflare가 Next의 테스트 없이는 불가능했을 거라는 주장에는 동의하지 않음. 리버스 엔지니어링으로 복잡한 시스템을 재현한 사례는 많았고, AI의 빠른 반복 속도를 고려하면 진입장벽은 거의 없음
    • “오픈코어 + 비공개 테스트” 모델로 간다면, 진짜 오픈소스는 결국 테스트나 스펙 그 자체가 될지도 모름

  • “Hello world”도 안 되는 수준에서 ‘재구현했다’고 말할 수 있을까 의문임
    게다가 원본의 테스트 스위트를 그대로 상속받고, 원본이 학습 데이터에 포함되어 있다면 ‘from scratch’라고 부르기 어렵다고 생각함
    (이후 예시로 저작권 있는 문장을 인용했지만 생략함)

  • 흥미로운 점은 Cloudflare가 한 달 전 Astro를 인수했다는 것임
    만약 AI로 손쉽게 대체할 수 있다면, 왜 굳이 Astro를 비싼 값에 샀을까?
    아마도 조직 차원에서는 여전히 프레임워크의 비전과 리더십을 확보하는 게 중요하다고 판단했을 것임

    • 이번 프로젝트는 진지한 프로덕션용이라기보다 경쟁사 풍자에 가까운 실험처럼 보임. 몇 년 뒤 결과를 보면 알겠음
    • Astro는 Next와 다른 패러다임임. Cloudflare는 Astro를 통해 정적 사이트 시장을 확보하려는 듯함.
      Next.js는 Vercel에 종속적이라 Cloudflare는 고객이 Next에서 Astro로 자연스럽게 이전하도록 유도할 가능성이 큼
    • Astro는 정적 사이트에 최적화되어 있고, Next는 동적 웹사이트에도 적합함.
      우리는 내부 문서 시스템에 Astro를 쓰는데, 그 용도로는 정말 훌륭함
    • Cloudflare는 단순히 자사 제품으로 트래픽을 유도하려는 것 같음. 나는 요즘 Svelte로 옮겼는데 꽤 만족스러움

  • Next.js는 과거 원격 코드 실행(RCE) 취약점이 있었음.
    그래서 AI가 만든 버전은 당분간은 절대 쓰지 않을 생각임

    • 나도 그 부분이 가장 충격적이었음. Next.js를 개인 프로젝트에 쓰지 않은 이유가 바로 그 보안 우려 때문이었음.
      AI가 수천 줄의 코드를 생성하면 이런 버그는 더 쉽게 숨어들 수 있음
    • 하지만 그건 Next.js 자체가 아니라 React의 취약점이었음

  • 이번 프로젝트는 지금까지 본 AI 실험 중 가장 흥미로움
    Next.js 코드베이스를 보면 엄청 방대하지만, 이번 구현은 코드량이 100분의 1 수준이라 놀라움
    과연 모든 엣지 케이스를 처리하는지, 아니면 단순히 테스트만 통과하는지 궁금함
    예를 들어 Next의 form 구현과
    Vinext의 form 구현을 비교하면 완전히 다름
    그래도 꽤 인상적인 시도임

    • (Cloudflare 엔지니어의 답변) 완전한 기능 일치는 목표가 아님.
      아직 초기 단계라 테스트에 포함되지 않은 문제들이 있을 수 있음
      코드가 훨씬 적은 이유는 Vite와 React RSC 플러그인 위에 구축했기 때문임
    • 아마도 Vite가 많은 무거운 작업을 대신 처리해주기 때문에 코드가 줄어든 것 같음
    • 솔직히 말해, Cloudflare가 Next 팀에 불만이 있어서 “AI와 인턴으로도 만들 수 있다”는 식으로 대응한 것처럼 보여서 좀 웃김

  • “AI로 X를 재구현했는데 너무 쉬웠다”는 말에는 회의적임
    세부사항과 버그 수정의 역사가 빠져 있을 가능성이 큼
    테스트를 완벽히 통과한다면 인정하겠지만, 그렇지 않다면 믿기 어려움

    • 나도 완전히 믿지는 않지만, 기사에 따르면 Next의 2,000개 단위 테스트와 400개 E2E 테스트를 가져와 모두 통과시켰다고 함

  • “소프트웨어의 추상화는 인간이 복잡성을 감당하기 위해 만든 것”이라는 말에는 동의하지 않음
    추상화는 현실의 본질을 포착하고 재사용성을 높이기 위한 수단임
    또한 ‘추상화’와 ‘레이어’는 다름. 레이어는 관심사의 분리에 더 가깝고, 추상화의 한 형태로 볼 수 있음

  • “전체 비용이 약 $1,100의 토큰이었다”는 점이 흥미로움

답변달기