はじめに
Next.jsで開発しているWebアプリを、VercelからCloudflare Workersへ移行する準備を進めています。
その中で、Next.jsをCloudflare Workers上で動かすための技術としてOpenNextを調べていました。
しかし、Cloudflareの公式ドキュメントを確認すると、現在はvinextという新しい選択肢が推奨されています。
OpenNextとvinextは、どちらもNext.jsのアプリケーションをVercel以外の環境で動かすための技術ですが、内部の仕組みが異なります。
今回は、vinextとは何なのか、OpenNextとの違いや既存のNext.jsプロジェクトへの導入方法について整理してみます。
vinextとは？
vinextは、Next.jsのアプリケーションをViteベースでビルド・実行するためのオープンソースプロジェクトです。
Cloudflareが開発を進めており、Next.jsのAPIとの互換性を維持しながら、Viteを利用してアプリケーションを動かすことを目指しています。
通常のNext.jsでは、Next.jsが提供するビルドツールを利用します。
一方、vinextではビルド基盤としてViteを使用します。
例えば、以下のようなNext.jsの機能に対応しています。
- App Router・Pages Router
- React Server Components
- Server Actions
- Route Handlers
- SSR（サーバーサイドレンダリング）
- SSG（静的サイト生成）
- ISR（Incremental Static Regeneration）
ただし、Next.jsのすべての機能が完全に同じように動作するわけではなく、一部の新しい機能やプラットフォーム固有の動作には制限があります。
なぜvinextが登場したのか？
Next.jsはVercel以外の環境でも動作しますが、Cloudflare Workersのような異なる実行環境にデプロイする場合、追加の対応が必要になることがあります。
これまでCloudflare Workersでは、主にOpenNextを利用してNext.jsのビルド結果を変換する方法が使われてきました。
しかし、OpenNextはNext.jsのビルド結果を利用するため、Next.js側のビルド構造や仕様の影響を受けます。
そこでvinextでは、Next.jsのビルド結果を変換するのではなく、Viteを使ってNext.js互換のアプリケーションをビルドするアプローチを採用しています。
つまり、Next.jsのビルド結果を別の環境向けに変換するのではなく、最初からViteを使ってビルドするという考え方です。
OpenNextとvinextの違い
OpenNextとvinextの大きな違いは、ビルドの仕組みにあります。
OpenNextの場合
Next.js
↓
next build
↓
Next.jsのビルド結果
↓
OpenNext
↓
Cloudflare Workers向けに変換
↓
Cloudflare Workers
OpenNextは、Next.jsが生成したビルド結果をCloudflare Workersで動作する形式に変換します。
vinextの場合
Next.jsのアプリケーション
↓
vinext
↓
Viteによるビルド
↓
Cloudflare Workers向けの出力
↓
Cloudflare Workers
vinextは、Next.jsのビルド結果を変換するのではなく、Viteを使ってアプリケーションをビルドします。
両者を比較すると、以下のようになります。
| 項目 | OpenNext | vinext |
|---|---|---|
| 基本的な仕組み | Next.jsのビルド結果を変換 | Viteでビルドする |
| ビルド基盤 | Next.js | Vite |
| Next.jsとの互換性 | 公式Next.jsのビルドを利用 | Next.js互換の機能を実装 |
| Cloudflare Workers | 対応 | 対応 |
| 主な特徴 | 既存のNext.jsビルドを活用 | ビルド基盤そのものを置き換える |
どちらもNext.jsをCloudflare Workersで動かすという目的は同じですが、その実現方法が異なります。
既存のNext.jsプロジェクトでも使える？
vinextは、既存のNext.jsプロジェクトにも導入できます。
基本的には、以下のようなディレクトリやコードを維持できます。
my-app/
├── app/
├── components/
├── public/
├── next.config.ts
└── package.json
app/やpages/を全面的に書き換える必要はなく、多くのnext/*からのインポートもそのまま利用できます。
また、既存のnext devやnext buildを残したまま、vinextを追加することも可能です。
そのため、Next.jsとvinextの動作を比較しながら移行を進められます。
vinextの導入方法
今回は、pnpmを使用しているプロジェクトを例にします。
1. 互換性をチェックする
まず、既存のNext.jsアプリケーションがvinextに対応しているかを確認します。
pnpm dlx vinext check
互換性チェックでは、既存プロジェクトの構成や利用している機能を調べ、移行時に注意が必要な点を確認できます。
実際に移行する前に、まずこのコマンドを実行しておくとよさそうです。
2. vinextを初期化する
続いて、以下のコマンドを実行します。
pnpm dlx vinext init
対話形式で必要な設定を選択できます。
Cloudflare Workers向けの初期化では、キャッシュや画像最適化の設定も必要になります。
初期化すると、主に以下のようなファイルや設定が追加されます。
vite.config.tscloudflare.config.ts- vinext関連の依存パッケージ
- vinext用の開発・ビルド・デプロイスクリプト
既存のNext.jsの設定を残しながら、vinext用の実行環境を追加する形になります。
3. ローカルで動作確認する
初期化後は、追加されたスクリプトを使ってvinextでアプリケーションを起動します。
pnpm run dev:vinext
本番向けビルドも確認できます。
pnpm run build:vinext
ビルドしたWorkersアプリケーションをローカルで実行する場合は、以下を使用します。
pnpm run start:vinext
実際の移行では、主要ページの表示だけでなく、APIやデータベースへの接続なども確認する必要があります。
vinextを導入すればすべて動く？
ここはOpenNextと同様に注意が必要です。
vinextを導入したからといって、既存のNext.jsアプリケーションがすべてそのまま動くわけではありません。
例えば、以下のような点は確認が必要です。
- Node.js向けライブラリの互換性
- データベースへの接続方法
- ファイルアップロード処理
- 画像最適化の設定
- ISRなどのキャッシュ設定
- Vercel固有のサービスや機能への依存
vinextはNext.js互換のビルド・実行環境を提供しますが、Cloudflare Workers自体の制約がなくなるわけではありません。
例えば、今回の移行準備では、CloudinaryのNode.js SDKへの依存を見直し、REST APIを直接呼び出す実装に変更しました。
こうしたライブラリの互換性や実行環境への対応は、vinextを利用する場合でも別途確認が必要です。
OpenNextからvinextに移行するべき？
Cloudflareの公式ドキュメントでは、現在、新しくCloudflare WorkersでNext.jsを動かす場合はvinextが推奨されています。
一方、既存のOpenNextアプリケーションについては、互換性を確認しながら移行する方針が案内されています。
そのため、すでにOpenNextで問題なく動作しているアプリケーションを、すぐにvinextへ切り替える必要があるとは限りません。
また、vinextは現在も開発が進められており、Next.jsの一部機能については対応状況を確認する必要があります。
今回のようにVercelからCloudflare Workersへの移行を進めている場合は、まずvinext checkで互換性を確認し、OpenNextと比較してから判断するのがよさそうです。
まとめ
vinextは、Next.jsのアプリケーションをViteベースでビルド・実行するための新しい仕組みです。
OpenNextがNext.jsのビルド結果を変換するのに対し、vinextはViteを利用してNext.js互換のアプリケーションをビルドします。
Cloudflareでは、現在、新しいNext.jsアプリケーションをWorkers上で動かす方法としてvinextが推奨されています。
ただし、vinextを導入するだけですべての互換性問題が解決するわけではありません。
Node.js向けライブラリやデータベース、画像アップロードなど、アプリケーション側の実装も確認する必要があります。
OpenNextはNext.jsのビルド結果を変換する仕組み、vinextはViteでNext.js互換のアプリケーションをビルドする仕組み。
この違いを理解しておくことで、Cloudflare Workersへの移行方法を検討しやすくなると思います。
今回の移行準備でも、vinextの互換性を確認しながら、どちらの構成を採用するか検討していきたいと思います。