Use this guide to maintain an existing OpenNext application. Migrate to vinext when compatibility allows.
OpenNext ↗ adapts the output of next build so it can run on different platforms, including Cloudflare Workers.
Most Next.js features are supported by the Cloudflare OpenNext adapter:
| Feature | Cloudflare OpenNext adapter | Notes |
|---|---|---|
| App Router | Supported | |
| Pages Router | Supported | |
| Route Handlers | Supported | |
| React Server Components | Supported | |
| Static Site Generation (SSG) | Supported | |
| Server-Side Rendering (SSR) | Supported | |
| Incremental Static Regeneration (ISR) | Supported | |
| Server Actions | Supported | |
| Response streaming | Supported | |
Asynchronous work with next/after |
Supported | |
| Middleware | Supported | |
| Image optimization | Supported | Supported through Cloudflare Images. |
| Partial Prerendering (PPR) | Supported | PPR is experimental in Next.js. |
Composable Caching ("use cache") |
Supported | Composable Caching is experimental in Next.js. |
| Node.js in Middleware | Not yet supported | Node.js middleware introduced in Next.js 15.2 is not yet supported. |
For detailed OpenNext documentation, refer to OpenNext for Cloudflare ↗.
Wrangler automatic configuration uses vinext for Next.js projects. To use OpenNext, configure the adapter manually.
-
Install the OpenNext Cloudflare adapter.
npm i @opennextjs/cloudflare@latestyarn add @opennextjs/cloudflare@latestpnpm add @opennextjs/cloudflare@latestbun add @opennextjs/cloudflare@latest -
Install Wrangler.
npm i -D wrangler@latestyarn add -D wrangler@latestpnpm add -D wrangler@latestbun add -d wrangler@latest -
Add a Wrangler configuration file.
In your project root, create a Wrangler configuration file with the following content:
{ "$schema": "./node_modules/wrangler/config-schema.json", "name": "my-app", "main": ".open-next/worker.js", // Set this to today's date "compatibility_date": "2026-08-25", "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-08-25" compatibility_flags = ["nodejs_compat"] [assets] directory = ".open-next/assets" binding = "ASSETS" [observability] enabled = true -
Add an OpenNext configuration file.
In your project root, create
open-next.config.ts:import { defineCloudflareConfig } from "@opennextjs/cloudflare"; export default defineCloudflareConfig();Use this file to configure OpenNext features such as caching. For more information, refer to OpenNext caching ↗.
-
Update
package.json.Add scripts for previewing, deploying, and generating Cloudflare types:
{ "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" } }Script usage
preview: Builds your app and serves it locally in the Workers runtime.deploy: Builds your app and deploys it to Cloudflare Workers.cf-typegen: Generatescloudflare-env.d.tswith Cloudflare binding types.
-
Develop locally.
Start the Next.js development server.
npm run devyarn run devpnpm run dev -
Preview with OpenNext.
Preview your application in the Workers runtime.
npm run previewyarn run previewpnpm run preview -
Deploy your project.
Deploy your project to Cloudflare Workers.
npm run deployyarn run deploypnpm run deploy