Skip to content

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

OpenNext アダプター

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

既存の OpenNext アプリケーションを維持するには、このガイドを使います。互換性が許せば vinext に移行してください。

OpenNext ↗ は next build の出力を、Cloudflare Workers を含むさまざまなプラットフォームで動かせるように変換します。

対応機能

ほとんどの Next.js 機能は、Cloudflare OpenNext アダプターで使えます。

機能 Cloudflare OpenNext アダプター 備考
App Router 対応
Pages Router 対応
Route Handlers 対応
React Server Components 対応
Static Site Generation (SSG) 対応
Server-Side Rendering (SSR) 対応
Incremental Static Regeneration (ISR) 対応
Server Actions 対応
Response streaming 対応
next/after による非同期処理 対応
Middleware 対応
画像最適化 対応 Cloudflare Images 経由で対応しています。
Partial Prerendering (PPR) 対応 PPR は Next.js では実験的です。
Composable Caching ("use cache") 対応 Composable Caching は Next.js では実験的です。
Middleware 内の Node.js 未対応 Next.js 15.2 で導入された Node.js middleware は、まだ対応していません。

OpenNext の詳細は、OpenNext for Cloudflare ↗ を参照してください。

OpenNext を手動で設定する

Wrangler の自動設定は、Next.js プロジェクトに vinext を使います。OpenNext を使うには、アダプターを手動で設定します。

  1. OpenNext の Cloudflare アダプターをインストールします。

    npm i @opennextjs/cloudflare@latest

  2. Wrangler をインストールします。

    npm i -D wrangler@latest

  3. Wrangler 設定ファイルを追加します。

    プロジェクトルートに、次の内容の Wrangler 設定ファイル を作成します。

    {
  "$schema": "./node_modules/wrangler/config-schema.json",
  "name": "my-app",
  "main": ".open-next/worker.js",
  // Set this to today's date
  "compatibility_date": "2026-09-20",
  "compatibility_flags": [
    "nodejs_compat"
  ],
  "assets": {
    "directory": ".open-next/assets",
    "binding": "ASSETS"
  },
  "observability": {
    "enabled": true
  }
}
    name = "my-app"
main = ".open-next/worker.js"
# Set this to today's date
compatibility_date = "2026-09-20"
compatibility_flags = ["nodejs_compat"]

[assets]
directory = ".open-next/assets"
binding = "ASSETS"

[observability]
enabled = true

  4. OpenNext 設定ファイルを追加します。

    プロジェクトルートに open-next.config.ts を作成します。

    import { defineCloudflareConfig } from "@opennextjs/cloudflare";

export default defineCloudflareConfig();

    このファイルで、キャッシュなどの OpenNext 機能を設定します。詳細は OpenNext のキャッシュ ↗ を参照してください。

  5. package.json を更新します。

    プレビュー、デプロイ、Cloudflare 型の生成用スクリプトを追加します。

    {
  "scripts": {
    "preview": "opennextjs-cloudflare build && opennextjs-cloudflare preview",
    "deploy": "opennextjs-cloudflare build && opennextjs-cloudflare deploy",
    "cf-typegen": "wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts"
  }
}

    スクリプトの使い方

    • preview: アプリをビルドし、Workers ランタイムでローカルに配信します。
    • deploy: アプリをビルドし、Cloudflare Workers にデプロイします。
    • cf-typegen: Cloudflare バインディングの型を含む cloudflare-env.d.ts を生成します。

  6. ローカルで開発します。

    Next.js の開発サーバーを起動します。

    npm run dev

  7. OpenNext でプレビューします。

    Workers ランタイムでアプリケーションをプレビューします。

    npm run preview

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

    プロジェクトを Cloudflare Workers にデプロイします。

    npm run deploy

役に立ちましたか？