Cloudflare から vinext という、Next.js の API を Vite 上で再実装したプラグインがリリースされました。npx vinext init から npx wrangler deploy の流れで Cloudflare Workers にデプロイできるとのことで、さっそく試してみます。

vinext とは

vinext は、Next.js のルーティング・SSR・next/* インポートを Vite 上で再実装した Vite プラグインです。既存の app/、pages/、next.config.js はそのままで動き、ビルドツールチェーンだけを Vite に置き換えられます。Cloudflare Workers がメインのデプロイターゲットで、現時点ではまだ experimental な位置づけです。

プロジェクトの作成と vinext の導入

create-next-app で Next.js プロジェクトを作成したあと、 vinext と Vite 関連の依存を追加します。

% npm create next-app next-to-vinext
% npm install -D vinext vite @vitejs/plugin-react
% npm install -D @vitejs/plugin-rsc react-server-dom-webpack

npx vinext init を実行する

npx vinext init を実行すると、互換性チェックが自動で走ります。

  vinext compatibility report
  ========================================

  Imports: 1/2 fully supported
    ~  next/font/google (1 file) — fonts loaded from CDN, not self-hosted at build time
    ✓  next/image (1 file) — uses @unpic/react (no local optimization yet)

  Libraries: 1/1 compatible
    ✓  tailwindcss

  Project structure:
    ✓  App Router (app/)
    ✓  1 page(s)
    ✓  1 layout(s)
    ✗  Missing "type": "module" in package.json — required for Vite

  Overall: 79% compatible (5 supported, 1 partial, 1 issues)

next/font/google は CDN 経由での読み込みになるため partial 扱いです（ビルド時のセルフホストはされません）。"type": "module" の不足は vinext init が自動で修正してくれます。完了すると vite.config.ts と npm スクリプト（dev:vinext・build:vinext・start:vinext）が追加されました。互換性チェックから設定ファイルの生成まで 1 コマンドで完結するのは手間が省けてよかったです。

Cloudflare 向けのセットアップ

Cloudflare Workers へのデプロイには @cloudflare/vite-plugin と wrangler が必要です。

% npm install -D @cloudflare/vite-plugin wrangler

vite.config.ts に cloudflare() を追加します。vinext() の直後に並べる形です。

import { cloudflare } from "@cloudflare/vite-plugin";
import vinext from "vinext";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    vinext(),
    cloudflare({
      viteEnvironment: {
        name: "rsc",
        childEnvironments: ["ssr"],
      },
    }),
  ],
});

package.json にデプロイ用スクリプトも追加しておきます。

{
  "scripts": {
    "deploy": "vinext deploy",
    "preview:worker": "wrangler dev",
    "cf:types": "wrangler types"
  }
}

ビルドとデプロイ

npm run build:vinext を実行すると、5 つのステップが順番に走ります。

[1/5] analyze client references... ✓ built in 504ms
[2/5] analyze server references... ✓ built in 39ms
[3/5] build rsc environment...     ✓ built in 159ms
[4/5] build client environment...  ✓ built in 74ms
[5/5] build ssr environment...     ✓ built in 45ms

合計で 1 秒もかかっておらず、ステップごとに実測時間が出るのでどこで時間を使っているかが一目でわかります。

次に npx wrangler deploy を実行しましょう。

Using redirected Wrangler configuration.
 - Configuration being used: "dist/server/wrangler.json"

wrangler.json はビルド時に dist/server/ へ自動生成されたものが参照されます。手動で設定ファイルを用意する必要はありませんでした。17 ファイルのアセットアップロードが完了すると、デプロイ URL が発行されます。

Uploaded next-to-vinext (6.93 sec)
Deployed next-to-vinext triggers (1.24 sec)
  https://next-to-vinext.wp-kyoto.workers.dev

wrangler deploy 1 コマンドで Workers へのデプロイが完了するのは体験としてシンプルでした。

まとめ

npx vinext init → npm run build:vinext → npx wrangler deploy の 3 ステップで、既存の Next.js プロジェクトを Cloudflare Workers にデプロイできました。公式に「experimental」と明記されているため本番利用は慎重に判断が必要ですが、移行コストの低さと操作の簡潔さは十分確認できました。