OpenNext adapter

Recommended path

Cloudflare recommends vinext instead of OpenNext for new Next.js applications on Cloudflare Workers.

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.

Supported features

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.

Configure OpenNext manually

Wrangler automatic configuration uses vinext for Next.js projects. To use OpenNext, configure the adapter manually.

Install the OpenNext Cloudflare adapter.

npm

yarn

pnpm

bun

npm i @opennextjs/cloudflare@latest

yarn add @opennextjs/cloudflare@latest

pnpm add @opennextjs/cloudflare@latest

bun add @opennextjs/cloudflare@latest

npmyarnpnpmbun

npm i @opennextjs/cloudflare@latest

Install Wrangler.

npm

yarn

pnpm

bun

npm i -D wrangler@latest

yarn add -D wrangler@latest

pnpm add -D wrangler@latest

bun add -d wrangler@latest

npmyarnpnpmbun

npm i -D wrangler@latest

Add a Wrangler configuration file.

In your project root, create a Wrangler configuration file with the following content:

wrangler.jsonc

wrangler.toml

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

name = "my-app"
main = ".open-next/worker.js"
upload_source_maps = true
# Set this to today's date
compatibility_date = "2026-11-02"
compatibility_flags = ["nodejs_compat"]

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

[observability]
enabled = true

wrangler.jsoncwrangler.toml

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

name = "my-app"
main = ".open-next/worker.js"
upload_source_maps = true
# Set this to today's date
compatibility_date = "2026-11-02"
compatibility_flags = ["nodejs_compat"]

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

[observability]
enabled = true

Note

You must turn on the nodejs_compat compatibility flag and set your compatibility date to 2024-09-23 or later.

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"
  }
}
```
preview: Builds your app and serves it locally in the Workers runtime.

deploy: Builds your app and deploys it to Cloudflare Workers.

cf-typegen: Generates cloudflare-env.d.ts with Cloudflare binding types.
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: Generates cloudflare-env.d.ts with Cloudflare binding types.

Develop locally.

Start the Next.js development server.

npm

yarn

pnpm

npm run dev

yarn run dev

pnpm run dev

npmyarnpnpm

npm run dev

Preview with OpenNext.

Preview your application in the Workers runtime.

npm

yarn

pnpm

npm run preview

yarn run preview

pnpm run preview

npmyarnpnpm

npm run preview

Deploy your project.

Deploy your project to Cloudflare Workers.

npm

yarn

pnpm

npm run deploy

yarn run deploy

pnpm run deploy

npmyarnpnpm

npm run deploy

Workers Builds

Workers Builds requires you to configure environment variables in Build variables and secrets.

This ensures the Next.js build has access to both public NEXT_PUBLIC_ variables and non-public variables required for static generation and server-side build work. For more information, refer to OpenNext environment variables.

Supported features

Configure OpenNext manually

Script usage

Script usage