「AIで1週間でNext.jsを再構築した方法」

2026-02‑24 – 10 分読了
この記事は12:35 pm PTでビルドタイムベンチマークのタイプミスを修正するために更新されました。

---

Next.js のデプロイ問題

Next.js は最も人気のある React フレームワークで、数多くの本番サイトを支えています。
開発体験は最高ですが、サーバーレスエコシステム全体に使うと デプロイ問題 が生じます。

• すべてのツールが独自設計 – Next.js は Turbopack に大きく依存しています。
• Cloudflare, Netlify, AWS Lambda へデプロイするには、ビルド出力を対象プラットフォームで動作可能な形に再構築しないといけません。
• OpenNext はこの問題解決のために作られましたが、制約があり「ウマの脳みそ」的な対処を繰り返す必要があります。
  Next.js のビルド出力を逆変換すると、バージョン間で予測不能な変更が発生します。

最先端のアダプター API（まだ初期段階）でも Turbopack を使って開発しています。

next dev

は Node.js 上でのみ動作するため、Durable Objects, KV, AI バインディングなどのプラットフォーム固有 API をワークアラウンドなしにテストできません。

---

vinext の登場

Next.js の出力を適応させる代わりに、Vite 上で Next.js API を再実装しました：

• Vite は Astro, SvelteKit, Nuxt, Remix などのフレームワークを支えるクリーンで高速なビルドツールです。

• vinext

  は Vite プラグインとして、ルーティング・SSR・React Server Components・サーバーアクション・キャッシュ・ミドルウェア等をすべて再実装します。
• Vite の Environment API により、Vite 出力は任意のプラットフォームで動作します。

クイックスタート

npm install vinext

# next を vinext に置き換えるだけ
npx vinext dev          # 開発サーバー（HMR）
npx vinext build        # 本番ビルド
npx vinext deploy       # Cloudflare Workers へビルド＆デプロイ

既存の

app/

,

pages/

,

next.config.js

はそのまま動作します。

---

ベンチマーク

GitHub CI 上で 33‑route App Router アプリを対象にした初期ベンチマークです。

フレームワーク	本番ビルド時間	相対速度
Next.js 16.1.6 (Turbopack)	7.38 s	ベースライン
vinext (Vite 7 / Rollup)	4.64 s	1.6×速い
vinext (Vite 8 / Rolldown)	1.67 s	4.4×速い

クライアントバンドルサイズ（gzip 圧縮）：

フレームワーク	gzip サイズ	相対削減率
Next.js 16.1.6	168.9 KB	ベースライン
vinext (Rollup)	74.0 KB	56 % 小さい
vinext (Rolldown)	72.9 KB	57 % 小さい

これらはコンパイルとバンドリング速度のみを測定したもので、実際の配信性能ではありません。

---

Cloudflare Workers へのデプロイ

vinext deploy

はアプリをビルドし、Worker 設定を自動生成してデプロイします。

npx vinext deploy

App Router と Pages Router の両方が Workers 上で完全なクライアント側ハイドレーションをサポート。
本番キャッシュ用に

vinext

は KV キャッシュハンドラを含みます：

import { KVCacheHandler } from "vinext/cloudflare";
import { setCacheHandler } from "next/cache";

setCacheHandler(new KVCacheHandler(env.MY_KV_NAMESPACE));

必要なら R2 や他のバックエンドに差し替えても構いません。

ライブサンプル

• App Router Playground
• Hacker News クローン
• App Router Minimal
• Pages Router Minimal

---

フレームワークはチームスポーツ

Vinext のコア（≈ 95 %）は純粋に Vite で構築され、デプロイ先だけが Cloudflare です。
Cloudflare は既に他のホスティングプロバイダーを検討しており、追加プラットフォームへの PR を歓迎します。

---

現状：実験的

• vinext は一週間未満で、まだ大規模トラフィックは見ていません。
• テストスイート: 1 700+ Vitest テスト, 380 Playwright E2E テスト, API カバレッジ 94 %。
• 初期本番顧客（例：National Design Studio）がビルド時間とバンドルサイズの改善を報告しています。

---

プリレンダリングは？

vinext は Incremental Static Regeneration (ISR) をデフォルトでサポートします。
ビルド時に静的プリレンダリングはまだ実装されていませんが、ロードマップ上計画中です。

---

Traffic‑aware Pre‑Rendering（TPR）の導入

すべてをプリレンダリングする代わりに、TPR は Cloudflare のゾーン解析データを利用してトラフィックのあるページだけをプリレンダリングします：

npx vinext deploy --experimental-tpr

例:

Building...
Build complete (4.2s)
TPR: 12,847 unique paths — 184 pages cover 90% of traffic
TPR: Pre-rendering 184 pages... (8.3 s → KV cache)
Deploying to Cloudflare Workers...

大規模サイトでは、最もアクセスの多いページだけがプリレンダリングされ、それ以外はオンデマンド SSR と ISR にフォールバックします。

---

Next.js の課題に AI で挑む

• 単一エンジニア（エンジニアリングマネージャー）がわずか一週間で AI を指示。
• 最初のコミットは 2 月 13 日、当夜には両ルータが基本的な SSR を実装済み。
• 3 日目には

  vinext deploy

  が完全にハイドレートされたアプリを Cloudflare Workers にデプロイ。

成功の鍵は次の三点です：

1. 明確なターゲット API – 豊富なドキュメント、Stack Overflow の回答、チュートリアル。
2. 包括的テストスイート – Next.js リポジトリから数千もの E2E テストを再利用。
3. 堅牢なビルドツール – Vite は HMR, ESM, バンドリングを担い、Next.js を「話せるように」教えるだけ。
4. 高度な AI モデル – 大規模コードベース全体で一貫性を保つことができる。

---

実際の構築手順

• vinext

  のすべての行は AI が書きましたが、厳格な品質ゲートを通過しています：
  • 1 700+ Vitest テスト
  • 380 Playwright E2E テスト
  • TypeScript 型チェック (

    tsgo

    )
  • Linting (

    oxlint

    )
• ワークフロー:
  1. タスクを定義（例: “next/navigation シムを実装”）。
  2. AI が実装とテストを書きます。
  3. テストを走らせ、合格ならマージ、不合格なら再試行。
• AI エージェントはコードレビューやブラウザレベルのテスト（

  agent-browser

  ）も実施。

総コスト: Claude API トークンで約 $1,100 です。

---

ソフトウェアへの意味

複雑さを管理するために層が存在します。
AI は全体システムをコンテキスト内に保持し、インターミディエイトフレームワークなしでコードを生成できます。
Vinext は、堅牢な仕様・テスト・ビルドツールがあれば AI が本番準備済みソフトウェアを迅速に作成できることを示しています。

---

感謝

• Vite チーム –

  vinext

  の基盤。
• @vitejs/plugin-rsc – 初期 RSC サポート。
• Next.js チーム – 包括的な API とテストスイートが実現の鍵。

---

使ってみる

マイグレーションエージェント

npx skills add cloudflare/vinext

任意のサポートツールで：

migrate this project to vinext

スキルが依存関係のインストール、設定生成、開発サーバー起動を担当します。

手動マイグレーション

npx vinext init    # 既存 Next.js プロジェクトを移行
npx vinext dev     # 開発サーバー開始
npx vinext deploy  # Cloudflare Workers にデプロイ

ソース: https://github.com/cloudflare/vinext
Issue, PR, フィードバックは歓迎です。

---

Cloudflare のコネクティビティクラウド は企業ネットワークを保護し、ウェブサイトの高速化・DDoS 防御・ゼロトラストへの移行を支援します。
任意デバイスから 1.1.1.1 にアクセスして、インターネットをより速く安全にする無料アプリで始めてください。