ビルド4倍速!VinextでNext.jsが変わる
CloudflareがわずかAI費用$1,100・1週間で作ったViteベースのNext.js互換フレームワーク「Vinext」。ビルド4.4倍速・バンドル57%削減の衝撃をリナ社長×タクヤが解説します。
登場人物
- リナ社長 … 高校生なのに会社経営するやり手ギャル。テックにも強くてAI活用が得意。
- タクヤ … 入社3年目の男性社員。真面目で少しだけコードが書ける。
リナ社長「タクヤ〜!これ見て見て、ビルドが4倍速くなるやつ出たんだけど!?」
タクヤ「え、4倍ですか……? それはさすがに盛ってますよね?」
リナ社長「マジで!?って思うじゃん。でもこれ数字ちゃんとあるんだよね。Vinextっていうんだけど、CloudflareのエンジニアがAI使って1週間で作ったやつで、えぐくない?」
タクヤ「……1週間。Cloudflareがですか。なるほど、ちょっと真面目に調べさせてください」
1. 「え、ビルドが4倍速ってどういうこと?」——Vinextとは何か
Vinextとは何か?
VinextはCloudflareが2026年2月24日に公開した実験的フレームワークです。一言で言うと「Next.jsのAPI仕様をViteの上で再実装したViteプラグイン」です。Next.jsのコードをそのまま移行して動かしながら、ビルドツールチェーンだけをViteに差し替えてしまおう、というアプローチです。
リナ社長「タクヤ、ぶっちゃけ既存のNext.jsプロジェクトとどう違うの?」
タクヤ「VinextはNext.jsのラッパーではなく、App Routerのルーティング・SSR・React Server Components・サーバーアクション・キャッシュ・ミドルウェアを全部Viteプラグインとして独自実装しています。なのでVercel以外の環境にも普通にデプロイできます」
リナ社長「あー、Vercelに縛られなくなるってこと? それだけでもヤバくない?」
衝撃の開発秘話:1週間・$1,100でAIが作った
さらに驚きなのはその開発プロセスです。Cloudflareのエンジニアリングマネージャー1人が、AIコーディングツール「OpenCode」でClaude Opus 4.6を800セッション以上駆動しながら1週間で完成させました。かかったAI APIのコストはなんと**$1,100(約17万円)**。
タクヤ「ちょ、ちょっと待って。普通フレームワーク1個作るのに何年もかかりますよね……?」
リナ社長「ほんとに。2月13日に開発スタートして、2月15日にはクライアントのハイドレーション含むデプロイパイプラインが動いてたって。2,000テスト超をパスするとこまで1週間で持ってったのはさすがにえぐい話だよね」
2. Vite 8(Rolldown)が速い理由——RollupからRustへの転換
リナ社長「で、なんでそんなに速くなるの? 魔法?」
タクヤ「魔法じゃなくてRustです。ポイントはVite 8から採用されたRolldownというバンドラーです」
| バンドラー | 言語 | 用途 |
|---|---|---|
| Webpack | JavaScript | 旧来のビルドツール |
| Rollup | JavaScript | Vite 7以前のプロダクションビルド |
| Rolldown | Rust | Vite 8のプロダクションビルド |
JavaScriptで書かれたRollupに対して、RolldownはRustで実装されています。RollupのAPIとの互換性を保ちながら、Rustのパフォーマンスでビルドを実行できるのが特徴です。
リナ社長「Rustってそんなに速いんですか? イメージわかないんですが……」
タクヤ「実際の数字を見てほしいんだけど、33ルートを持つテストアプリで計測したら:
Next.js 16(Turbopack): 7.38秒
Vinext(Vite 8 / Rolldown): 1.67秒
つまり4.4倍速。しかもgzip後のクライアントバンドルサイズも168.9KBから72.9KBへ、57%削減になってる」
リナ社長「……それは数字として普通にすごいですね。開発体験も変わりそうです」
3. Next.jsと何が違うの?——94%互換の「残り6%」の話
リナ社長「94%互換って言ってたけど、残り6%って何が動かないの?」
タクヤ「はい、そこが実用上のポイントです。1,700件以上のVitestテストと380件のPlaywright E2Eテストで検証した結果が94%互換という数字です」
対応済みのAPI(94%)
- App Routerのルーティング全般(ネストレイアウト、ローディング状態、エラーバウンダリ、パラレルルート、インターセプトルート)
- React Server Components(RSC)
- サーバーアクション
- キャッシュ機構
- ミドルウェア
- メタデータAPI
- ストリーミングSSR
リナ社長「じゃあ残り6%って具体的に……?」
タクヤ「公式としては**「未実装・実験段階の機能が残っている」**という表現にとどまっています。現時点でVinextは”experimental”ステータスで、大規模な本番トラフィックでの検証が十分ではないと明言しています。ただしすでにアメリカ政府のCIO.govのbetaサイト(国家デザインスタジオのサイト)がproduction betaとして稼働しているのは事実です」
リナ社長「うーん、ちゃんとリスクも伝えてるのは誠実だよね。実験段階って明言してるし」
4. 実際に動かしてみた——セットアップからビルド比較まで
タクヤ「リナ社長、実際にやってみましょうか」
リナ社長「きたきた! どうやって入れるの?」
既存のNext.jsプロジェクトへの導入は3ステップで完了します。
ステップ1:互換性チェック
npx vinext check
プロジェクトの互換性問題を自動スキャンします。
ステップ2:移行の実行
npx vinext init
これ1コマンドで移行が完了します。重要なのは非破壊的な点で、next.config.jsやtsconfig.json、ソースファイルは一切変更されません。Next.jsの依存関係も残ったままなので、元に戻せます。
ステップ3:開発サーバー起動
vinext dev # 開発サーバー(HMR付き)
vinext build # プロダクションビルド
vinext deploy # Cloudflare Workersへデプロイ
リナ社長「--portとかのオプションってNext.jsと同じ?」
タクヤ「はい、next dev --port 3001はvinext dev --port 3001と同じフラグがそのまま使えます。デプロイ先もCloudflare Workersだけでなく、VercelやNetlify、AWS、Deno Deployにも対応しています」
リナ社長「へえ、これ移行のハードル低いじゃん! AI移行スキルもあるって書いてあったし、Claude CodeとかCursorからそのまま使えるの?」
タクヤ「はい。vinextにはClaudeやCursor、Codexなどのエージェントツールから呼び出せるAgent Skillが内蔵されています。互換性チェックから依存インストール、設定生成、devサーバー起動まで一気にやってくれます」
5. 「で、本番で使っていい?」——Vinextの今とこれから
リナ社長「結局、今すぐ本番に入れてOK?」
タクヤ「正直に言います。今の段階では慎重に判断すべきです」
| ユースケース | 推奨度 |
|---|---|
| 個人開発・趣味プロジェクト | 試してOK |
| 社内ツール・ステージング環境 | 検証用途でOK |
| 新規の中小規模サービス | リスク許容できるならOK |
| 大規模トラフィックの本番サービス | まだ待ち推奨 |
リナ社長「まあでも、4.4倍速を新規プロジェクトで試さない手はないよね」
タクヤ「そうですね。特にCloudflare Workersへのデプロイを考えているプロジェクトは親和性が高いと思います」
フレームワーク競争のこれから
もう一つ見逃せない文脈があります。2026年2月24日、ReactはMetaを離れてLinux Foundation傘下のReact Foundationとして独立しました。ファウンディングメンバーはAmazon・Callstack・Expo・Meta・Microsoft・Software Mansion・Vercelの7社で、Huaweiは2025年10月の当初発表後に追加で参加しています。
リナ社長「これってつまり、VercelがNext.jsをほぼ一人で育ててきた時代が変わりつつあるってこと?」
タクヤ「そう読めますね。CloudflareのVinextも「どこにでもデプロイできる」を旗印にしているのは意図的だと思います。Reactのガバナンスが中立化する中で、フレームワーク層でも競争が激しくなってきた。Vinextは実験的プロダクトですが、この流れの象徴として注目しておく価値はあります」
リナ社長「AIが1週間で作れる時代に、フレームワーク1択の時代は終わりかもね。えぐくない?」
まとめ
- VinextはNext.jsのAPIをViteプラグインとして再実装した実験的フレームワーク
- Vite 8(Rolldown)のRustバンドラーによりビルド4.4倍速・バンドル57%削減を実現
- 94%のNext.js互換性を持ちつつ、残り6%は未実装あり
npx vinext initで非破壊的移行が可能、Cloudflare Workers以外にも広くデプロイ対応- 現時点はexperimental。大規模本番投入には様子見を推奨
参考
- How we rebuilt Next.js with AI in one week — CloudflareエンジニアによるVinext開発経緯とアーキテクチャの公式解説
コメント