Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

Next.js

最終更新 Markdown で表示Agent セットアップ

vinext を使って Next.js アプリケーションを作成または移行し、Cloudflare Workers にデプロイします。

Cloudflare は、Cloudflare Workers 上で Next.js アプリケーションを動かす標準の方法として vinext ↗ を推奨しています。vinext には 2 つの出発点があります。create-vinext-app で Workers 向けの新しいアプリを作成するか、既存の Next.js 16 アプリに非破壊的な vinext init を 1 回実行して vinext を追加します（既存の next dev はそのまま使えます）。どちらの場合も、Cloudflare 専用のテンプレートは不要です。

すでに OpenNext を使っている場合は、その他の Next.js デプロイ方法 を参照してください。

Next.js とは

Next.js ↗ は、フルスタックアプリケーションを構築するための React ↗ フレームワークです。

Next.js は、サーバーサイドレンダリング、クライアントサイドレンダリング、静的生成、React Server Components、Server Actions、ルートハンドラー、ミドルウェアに対応しています。

vinext とは

vinext ↗ は、Next.js の API サーフェスを再実装する Vite プラグインです。既存の app/、pages/、next.config.js、public/ ディレクトリを維持したまま、Vite のツールチェーンを使えます。

vinext はベータ版です。既存の本番アプリケーションに導入する前に、プロジェクトディレクトリで互換性チェックを実行し、vinext の互換性ダッシュボード ↗ を確認してください。

npx vinext check

対応機能

vinext は、Cloudflare Workers 上でよく使われる Next.js の機能の多くに対応しています。

機能 vinext の対応 備考
App Router 対応 レイアウト、ルートハンドラー、メタデータ、loading、error、not-found ルートを含みます。
Pages Router 対応 getStaticProps、getStaticPaths、getServerSideProps を含みます。
React Server Components 対応 Vite の React Server Components サポートを使います。
Server Actions 対応 フォームとサーバー側のミューテーションで動作します。
サーバーサイドレンダリング 対応 ストリーミングレンダリングを含みます。
静的生成と静的エクスポート 対応 静的エクスポートには output: "export" を使います。
Incremental Static Regeneration (ISR) 対応 stale-while-revalidate のキャッシュモデルを使い、Workers はキャッシュ済みコンテンツを返しながら、バックグラウンドで更新できます。詳細は 非同期再検証 を参照してください。
ミドルウェアとプロキシルート 対応 middleware.ts と proxy.ts を含みます。
next/* の import ほぼ対応 モジュール単位の詳細は互換性ダッシュボードを確認してください。
Cloudflare バインディング 対応 サーバーコンポーネント、ルートハンドラー、Server Actions で cloudflare:workers を使います。
画像最適化 一部対応 リクエスト時に Cloudflare の画像最適化を利用できます。

詳細な互換性の結果は、vinext の互換性 ↗ を参照してください。

セットアップ方法を選ぶ

ほとんどの Next.js プロジェクトは、同じ流れで始められます。Next.js アプリを開き、互換性を確認し、vinext を追加して、Workers にデプロイします。

エージェントで vinext を追加する

コーディングエージェントに Next.js プロジェクトの調査、互換性チェック、設定の更新、vinext 開発サーバーの起動を任せたい場合は、vinext の Agent Skill を使います。

  1. Next.js プロジェクトを開きます。

    既存のプロジェクトを使うか、好みの Next.js セットアップ手順でプロジェクトを作成します。

  2. vinext の Agent Skill をインストールします。

    npx skills add cloudflare/vinext

  3. エージェントに指示します。

    コーディングエージェントで、次のプロンプトを実行します。

    migrate this project to vinext

    この Skill は vinext の互換性チェックを実行し、移行を適用し、手動対応が必要な問題を知らせます。

  4. vinext で開発します。

    vinext の開発サーバーを起動します。

    npm run dev:vinext

  5. vinext でビルドします。

    vinext で本番用の出力をビルドします。

    npm run build:vinext

  6. Workers にデプロイします。

    vinext の Cloudflare デプロイコマンドでデプロイします。

    npx @vinext/cloudflare deploy

CLI で vinext を追加する

コマンドラインで直接セットアップしたい場合は vinext init を使います。移行は非破壊的です。Cloudflare Workers へのデプロイを検証している間も、既存の Next.js セットアップは vinext と並行して動作し続けます。

  1. Next.js プロジェクトを開きます。

    既存のプロジェクトを使うか、好みの Next.js セットアップ手順でプロジェクトを作成します。

  2. 互換性を確認します。

    Next.js プロジェクトのディレクトリで、vinext の互換性チェックを実行します。

    npx vinext check

    続行する前に、報告された互換性の問題を確認します。

  3. vinext を初期化します。

    vinext の初期化を実行し、求められたらデプロイ先として Cloudflare Workers を選びます。

    npx vinext init

    vinext init は vinext と Vite の依存関係をインストールし、vinext のスクリプトを追加し、Vite 設定を生成し、Cloudflare Workers の設定を作成します。

  4. vinext で開発します。

    vinext の開発サーバーを起動します。

    npm run dev:vinext

  5. vinext でビルドします。

    vinext で本番用の出力をビルドします。

    npm run build:vinext

  6. Workers にデプロイします。

    vinext の Cloudflare デプロイコマンドでデプロイします。

    npx @vinext/cloudflare deploy

Cloudflare 向けプロジェクトを作成する

Cloudflare Workers 向けに設定済みの新しい Next.js プロジェクトを作成したい場合は、create-cloudflare CLI（C3）を使います。

  1. C3 で新しいプロジェクトを作成します。

    npm create cloudflare@latest -- my-next-app --framework=next

    コマンドの動作

    C3 は新しい Next.js プロジェクトを作成し、Cloudflare Workers 向けに vinext を設定し、必要な依存関係をインストールし、アプリケーションのデプロイを案内します。

  2. vinext で開発します。

    プロジェクトディレクトリに移動し、ローカル開発サーバーを起動します。

    npm run dev

  3. アプリケーションをビルドします。

    デプロイ前、または本番ビルドの確認前に、生成されたビルドスクリプトを実行します。

    npm run build

  4. プロジェクトをデプロイします。

    *.workers.dev サブドメイン または カスタムドメイン にプロジェクトをデプロイします。

    npm run deploy

Cloudflare バインディングへアクセスする

Workers にデプロイした vinext アプリケーションでは、サーバーコンポーネント、ルートハンドラー、Server Actions からバインディングへアクセスするために cloudflare:workers を使います。Wrangler の設定でバインディングを定義し、wrangler types で型を生成します。

たとえば、サーバーサイドのアプリケーションコードで cloudflare:workers から env をインポートすると、D1、R2、KV、Durable Objects、Workers AI、Queues、Vectorize などのバインディングにアクセスできます。

その他の Next.js デプロイ方法を使う

Cloudflare Workers 上の Next.js アプリケーションには vinext をおすすめしますが、次のデプロイ方法も引き続きドキュメント化されています。

方法 使う場面
OpenNext アダプター 互換性の不足により、まだ vinext へ移行できない既存の OpenNext アプリケーションを維持している場合。
Pages 上の静的 Next.js アプリケーションが静的エクスポートであり、特に Cloudflare Pages へデプロイしたい場合。

役に立ちましたか？