# Next.js를 AI로 일주일 만에 재구현한 방법 > Clean Markdown view of GeekNews topic #26997. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=26997](https://news.hada.io/topic?id=26997) - GeekNews Markdown: [https://news.hada.io/topic/26997.md](https://news.hada.io/topic/26997.md) - Type: GN+ - Author: [neo](https://news.hada.io/@neo) - Published: 2026-02-25T18:34:18+09:00 - Updated: 2026-02-25T18:34:18+09:00 - Original source: [blog.cloudflare.com](https://blog.cloudflare.com/vinext/) - Points: 4 - Comments: 1 ## Topic Body - **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](https://github.com/cloudflare/vinext)에서 공개 ### 감사 및 기반 기술 - **Vite 팀**의 지원과 `@vitejs/plugin-rsc` 덕분에 React Server Components 기능 구현 가능 - **Next.js 팀의 문서화와 테스트 스위트**가 프로젝트 성공의 핵심 기반으로 작용 ## Comments ### Comment 51892 - Author: neo - Created: 2026-02-25T18:34:18+09:00 - Points: 1 ###### [Hacker News 의견들](https://news.ycombinator.com/item?id=47142156) - 한 달 전만 해도 “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는 점진적으로 성장하며 복잡해졌지만, 새 프레임워크는 처음부터 **서버 컴포넌트**를 단순화할 수 있음 이미 [미국 정부 사이트](https://www.cio.gov/)에서도 사용 중이라 놀라움 - 한 조직이 API 실험과 **베스트 프랙티스**를 정립하면, 다른 조직이 그걸 그대로 가져가는 구조임 Vercel이 자초한 결과이긴 하지만, 이런 흐름이 소규모 오픈소스 프로젝트에는 위협이 될 수 있음 - Cloudflare가 Next의 테스트 없이는 불가능했을 거라는 주장에는 동의하지 않음. **리버스 엔지니어링**으로 복잡한 시스템을 재현한 사례는 많았고, AI의 빠른 반복 속도를 고려하면 진입장벽은 거의 없음 - “오픈코어 + 비공개 테스트” 모델로 간다면, 진짜 오픈소스는 결국 **테스트나 스펙** 그 자체가 될지도 모름 - “Hello world”도 안 되는 수준에서 ‘재구현했다’고 말할 수 있을까 의문임 게다가 원본의 **테스트 스위트**를 그대로 상속받고, 원본이 학습 데이터에 포함되어 있다면 ‘from scratch’라고 부르기 어렵다고 생각함 (이후 예시로 저작권 있는 문장을 인용했지만 생략함) - 흥미로운 점은 Cloudflare가 한 달 전 [Astro를 인수](https://blog.cloudflare.com/astro-joins-cloudflare/)했다는 것임 만약 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 구현](https://github.com/vercel/next.js/blob/b8cbaad24ca66ec673a7b1bf77721db177de5b06/packages/next/src/client/app-dir/form.tsx#L26)과 [Vinext의 form 구현](https://github.com/cloudflare/vinext/blob/main/packages/vinext/src/shims/form.tsx)을 비교하면 완전히 다름 그래도 꽤 인상적인 시도임 - (Cloudflare 엔지니어의 답변) 완전한 **기능 일치**는 목표가 아님. 아직 초기 단계라 테스트에 포함되지 않은 문제들이 있을 수 있음 코드가 훨씬 적은 이유는 **Vite와 React RSC 플러그인** 위에 구축했기 때문임 - 아마도 Vite가 많은 **무거운 작업**을 대신 처리해주기 때문에 코드가 줄어든 것 같음 - 솔직히 말해, Cloudflare가 Next 팀에 불만이 있어서 “AI와 인턴으로도 만들 수 있다”는 식으로 대응한 것처럼 보여서 좀 웃김 - “AI로 X를 재구현했는데 너무 쉬웠다”는 말에는 회의적임 세부사항과 **버그 수정의 역사**가 빠져 있을 가능성이 큼 테스트를 완벽히 통과한다면 인정하겠지만, 그렇지 않다면 믿기 어려움 - 나도 완전히 믿지는 않지만, 기사에 따르면 Next의 **2,000개 단위 테스트와 400개 E2E 테스트**를 가져와 모두 통과시켰다고 함 - “소프트웨어의 추상화는 인간이 복잡성을 감당하기 위해 만든 것”이라는 말에는 동의하지 않음 추상화는 현실의 본질을 포착하고 **재사용성**을 높이기 위한 수단임 또한 ‘추상화’와 ‘레이어’는 다름. 레이어는 **관심사의 분리**에 더 가깝고, 추상화의 한 형태로 볼 수 있음 - “전체 비용이 약 **$1,100의 토큰**이었다”는 점이 흥미로움