AIを使って1週間でNext.jsを再構築した方法

AIを使って1週間でNextjsを再構築した方法 ![](https://blog.cloudflare.com/cdn-cgi/image/format=auto,dpr=3,width=64,height=64,gravity=face,fit=crop,zoom=0.5/https://cf-assets.www.cloudflare.com/zkvhlag99gkb/5QLe2KDuN7J0YVnb2gf743/2b6327152ff0e693cf3d142bbbefcd44/1517689834276.jpg) Steve Faulkner *この投稿はPT午後12時35分に更新され、ビルド時間のベンチマークにおける誤字を修正しました。 先週、1人のエンジニアとAIモデルが最も人気のあるフロントエンドフレームワークを一から再構築しました。その結果が「vinext」（発音は「ヴィー・ネクスト」）です。これはVite上に構築されたNext.jsの代替品で、単一のコマンドでCloudflare Workersにデプロイできます。初期のベンチマークでは、本番アプリのビルドが最大4倍高速化され、クライアントバンドルサイズが最大57%削減されました。そして、すでに本番環境で実行している顧客もいます。 この全体のコストは、トークン換算で約1,100ドルでした。 Next.jsのデプロイ問題 Next.jsは最も人気のあるReactフレームワークです。何百万人もの開発者が使用しており、ウェブの本番環境の大部分を支える正当な理由があります。開発者体験は最高水準です。 しかし、Next.jsには、より広範なサーバーレスエコシステムで使用する際にデプロイの問題があります。ツーリングは完全に特注品です。Next.jsはTurbopackに多大な投資をしていますが、Cloudflare、Netlify、AWS Lambdaにデプロイしたい場合、そのビルド出力を取得し、ターゲットプラットフォームが実際に実行できる何かに再形成する必要があります。 「OpenNextがその役割を果たすのでは？」と考えているなら、その通りです。 まさにそれがOpenNextが解決するために構築された問題です。Cloudflareを含む複数のプロバイダーから、OpenNextには多くのエンジニアリング努力が注がれてきました。それは機能しますが、すぐに制限にぶつかり、いたちごっこのゲームになってしまいます。 Next.jsの出力を基盤としてその上に構築することは、困難で脆弱なアプローチであることが証明されています。OpenNextはNext.jsのビルド出力をリバースエンジニアリングする必要があるため、バージョン間で予測不可能な変更が生じ、それを修正するには多くの作業が必要になります。 Next.jsは第一級のアダプターAPIに取り組んでおり、私たちもそれについて彼らと協力しています。これはまだ初期段階の取り組みですが、アダプターがあったとしても、依然として特注のTurbopackツールチェーンの上に構築することになります。そしてアダプターはビルドとデプロイのみをカバーします。開発中、`next dev`はNode.jsでのみ排他的に実行され、異なるランタイムを接続する方法はありません。アプリケーションがDurable Objects、KV、AIバインディングなどのプラットフォーム固有のAPIを使用する場合、回避策なしでは開発環境でそのコードをテストできません。 vinextの紹介 Next.jsの出力を適応させる代わりに、Next.jsのAPIサーフェスをVite上で直接再実装したらどうでしょうか？ViteはNext.js以外のフロントエンドエコシステムの大部分で使用されているビルドツールで、Astro、SvelteKit、Nuxt、Remixなどのフレームワークを支えています。単なるラッパーやアダプターではなく、クリーンな再実装です。正直なところ、うまくいくとは思いませんでした。しかし、今は2026年であり、ソフトウェア構築のコストは完全に変わっています。 私たちは予想以上に進展しました。 npm install vinext vinext dev # ホットモジュールリプレースメント付き開発サーバー vinext build # 本番ビルド vinext deploy # Cloudflare Workersへのビルドとデプロイ これはNext.jsとTurbopack出力のラッパーではありません。APIサーフェスの代替実装です：ルーティング、サーバーレンダリング、React Server Components、サーバーアクション、キャッシング、ミドルウェア。これらすべてがプラグインとしてVite上に構築されています。最も重要なのは、Vite Environment APIのおかげで、Vite出力はあらゆるプラットフォームで実行できることです。 初期のベンチマークは有望です。33のルートを持つ共有App Routerアプリケーションを使用して、vinextをNext.js 16と比較しました。両フレームワークは同じ作業を行っています：コンパイル、バンドル、サーバーレンダリングされたルートの準備。Next.jsのビルドではTypeScriptの型チェックとESLintを無効にし（Viteはビルド中にこれらを実行しません）、`force-dynamic`を使用してNext.jsが静的ルートのプリレンダリングに余分な時間を費やさないようにしました（これにより不公平に速度が低下するのを防ぐためです）。目標は、バンドラーとコンパイル速度のみを測定することであり、それ以外はありません。ベンチマークはGitHub CI上で、mainへのすべてのマージ時に実行されます。 本番ビルド時間: Next.js 16.1.6 (Turbopack) vinext (Vite 7 / Rollup) vinext (Vite 8 / Rolldown) クライアントバンドルサイズ (gzip圧縮後): vinext (Rollup) vinext (Rolldown) これらのベンチマークは、コンパイルとバンドリングの速度を測定しており、本番環境でのサービス提供パフォーマンスではありません。テストフィクスチャは単一の33ルートアプリであり、すべての本番アプリケーションを代表するサンプルではありません。これら3つのプロジェクトが開発を続けるにつれて、これらの数値は変化すると予想しています。完全な方法論と過去の結果は公開されています。決定的なものではなく、方向性を示すものとして捉えてください。 とはいえ、その方向性は励みになります。Viteのアーキテクチャ、特にRolldown（Vite 8で導入予定のRustベースのバンドラー）は、ビルドパフォーマンスにおいて構造的な利点があり、それがここではっきりと表れています。 Cloudflare Workersへのデプロイ vinextは、最初のデプロイターゲットとしてCloudflare Workersを念頭に置いて構築されています。単一のコマンドで、ソースコードから実行中のWorkerへと移行できます。 これによりすべてが処理されます：アプリケーションのビルド、Worker設定の自動生成、デプロイ。App RouterとPages Routerの両方がWorkers上で動作し、完全なクライアントサイドハイドレーション、インタラクティブコンポーネント、クライアントサイドナビゲーション、React状態が利用できます。 本番環境のキャッシングについては、vinextにはISR（増分的静的再生成）をすぐに利用できるCloudflare KVキャッシュハンドラーが含まれています。 import { KVCacheHandler } from "vinext/cloudflare"; import { setCacheHandler } from "next/cache"; setCacheHandler(new KVCacheHandler(env.MY_KV_NAMESPACE)); KVはほとんどのアプリケーションにとって適切なデフォルトですが、キャッシングレイヤーは差し替え可能に設計されています。その`setCacheHandler`呼び出しは、理にかなったバックエンドを何でも交換できることを意味します。大きなキャッシュペイロードや異なるアクセスパターンを持つアプリには、R2の方が適しているかもしれません。また、設定を減らしながら強力なキャッシングレイヤーを提供するべきCache APIの改善にも取り組んでいます。目標は柔軟性です：あなたのアプリに合ったキャッシング戦略を選択してください。 現在実行中のライブ例: App Router Playground Hacker Newsクローン App Router最小構成 Pages Router最小構成 また、Cloudflare AgentsがNext.jsアプリ内で実行されているライブ例もあります。これは、アプリ全体が開発フェーズとデプロイフェーズの両方で`workerd`内で実行されるようになったため、`getPlatformProxy`のような回避策を必要としません。これは、妥協することなく、Durable Objects、AIバインディング、およびその他のすべてのCloudflare固有のサービスを使用できることを意味します。こちらをご覧ください。 フレームワークはチームスポーツ 現在のデプロイターゲットはCloudflare Workersですが、それは全体像のごく一部です。vinextの約95%は純粋なViteです。ルーティング、モジュールのシャイム、SSRパイプライン、RSC統合：どれもCloudflare固有のものではありません。 Cloudflareは、他のホスティングプロバイダーと協力し、彼らの顧客向けにこのツールチェーンを採用することを検討しています（作業は最小限です — Vercelでの概念実証を30分以内に動作させました！）。これはオープンソースプロジェクトであり、長期的な成功のためには、エコシステム全体のパートナーと協力して継続的な投資を確保することが重要であると信じています。他のプラットフォームからのプルリクエストは歓迎します。デプロイターゲットを追加することに興味がある場合は、イシューを開くか連絡してください。 ステータス: 実験的 明確にしておきたいのですが：vinextは実験的です。誕生してから1週間も経っておらず、大規模な意味のあるトラフィックでの実戦テストはまだ行われていません。本番アプリケーションで評価する場合は、適切な注意を払って進めてください。 とはいえ、テストスイートは広範です：1,700以上のVitestテストと380のPlaywright E2Eテストがあり、Next.jsテストスイートとOpenNextのCloudflare適合性テストスイートから直接移植されたテストを含みます。Next.js App Router Playgroundに対して検証を行いました。カバレッジはNext.js 16 APIサーフェスの94%に達しています。実際の顧客からの初期結果は励みになるものです。私たちは、すべての政府インターフェースを近代化することを目指すチーム、National Design Studioと協力し、彼らのベータサイトの1つであるCIO.govに取り組んでいます。彼らはすでにvinextを本番環境で実行しており、有意な改善を

AIを使って1週間でNext.jsを再構築した方法

背景や根拠まで確認しますか？

調べる

選ぶ

サイト