- vinext は、AIと1人のエンジニアが1週間で作った Next.js互換フレームワーク で、ViteベースでCloudflare Workersへ1行のコマンドでデプロイ可能
- ビルド速度は最大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コード で構成されており、他のホスティングプラットフォームでも適用可能
- オープンソースとして公開されており、他プラットフォーム向けの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チームのドキュメントとテストスイート が、プロジェクト成功の中核的な基盤として機能
1件のコメント
Hacker Newsのコメント
1か月前までは「AIが商用レベルのソフトウェアを作った事例を1つだけ見せてくれ」と言われていたのに、今ではCloudflareが複数の例を公開し、昨日はLadybirdがAIによってRustへ移植された
こうした事例に共通するのは、テストスイートがしっかり整備されていて作業が単純化されていた点だ
もしかするとAIのおかげでテスト駆動開発(TDD) が再び復活するかもしれない
私はNextが本当に好きだが、Viteも大好きだ
ただ、Nextチームは全ユーザーのうち0.1%のためだけの機能に集中し、残りの99.9%を無視しているように感じる
Cloudflareの今回のフォークは、そうした不満を解消してくれそうだ。性能改善はNextコミュニティが長年望んでいた部分だったのに、Nextチームは無視し、Cloudflareはそれを解決しようとしている
ViteがNextよりはるかに優れたコアレイヤーを提供しつつ、Nextの機能を維持している点が気に入っている
このフォークが成功して、会社でも使えるようになることを願っている
今回の事例は、AI時代のオープンソースのインセンティブをよく示している
ドキュメントを整備し、契約を明確に定義するほど、他の人がそれを複製しやすくなる
CloudflareがNextのテストを活用していなければ、こうした結果は不可能だっただろう
Nextは段階的に成長しながら複雑化してきたが、新しいフレームワークは最初からサーバーコンポーネントを単純化できる
すでに米国政府のサイトでも使われているのは驚きだ
Vercelが自ら招いた結果ではあるが、こうした流れは小規模なオープンソースプロジェクトには脅威になり得る
“Hello world”すらまともに動かないレベルで『再実装した』と言えるのか疑問だ
しかも元のテストスイートをそのまま継承し、元コードが学習データに含まれているなら、“from scratch”と呼ぶのは難しいと思う
（この後、例として著作権のある文章を引用していたが省略）
興味深いのは、Cloudflareが1か月前にAstroを買収したことだ
もしAIで簡単に置き換えられるなら、なぜわざわざAstroを高額で買ったのだろうか？
おそらく組織としては、依然としてフレームワークのビジョンとリーダーシップを確保することが重要だと判断したのだろう
Next.jsはVercelに依存しているため、Cloudflareは顧客がNextからAstroへ自然に移行するよう誘導する可能性が高い
私たちは社内ドキュメントシステムにAstroを使っているが、その用途には本当に素晴らしい
Next.jsには過去にリモートコード実行(RCE) 脆弱性があった。
だからAIが作ったバージョンは当分絶対に使うつもりはない
AIが数千行のコードを生成すれば、こういうバグはさらに紛れ込みやすくなる
今回のプロジェクトは、これまで見たAI実験の中で最も興味深い
Next.jsのコードベースを見ると途方もない規模だが、今回の実装はコード量が100分の1程度で驚かされる
果たしてすべてのエッジケースを処理しているのか、それとも単にテストを通しているだけなのか気になる
例えば Nextのform実装 と
Vinextのform実装を比べると、まったく異なっている
それでもかなり印象的な試みだ
まだ初期段階なので、テストに含まれていない問題がある可能性はある
コードがはるかに少ないのは、ViteとReact RSCプラグインの上に構築しているからだ
「AIでXを再実装したらとても簡単だった」という話には懐疑的だ
細部やバグ修正の歴史が抜け落ちている可能性が高い
テストを完全に通しているなら認めるが、そうでないなら信じがたい
「ソフトウェアの抽象化は、人間が複雑性に対処するために作ったものだ」という言い方には同意しない
抽象化は現実の本質を捉え、再利用性を高めるための手段だ
また、『抽象化』と『レイヤー』は別物だ。レイヤーは関心の分離により近く、抽象化の一形態と見なせる
「総コストが約**$1,100分のトークン**だった」という点は興味深い