OpenNext adapter

Last updated Oct 12, 2026 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:

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.

1. Install the OpenNext Cloudflare adapter.npmyarnpnpmbun

npm i @opennextjs/cloudflare@latest

yarn add @opennextjs/cloudflare@latest

pnpm add @opennextjs/cloudflare@latest

bun add @opennextjs/cloudflare@latest

1. Install Wrangler.npmyarnpnpmbun

npm i -D wrangler@latest

yarn add -D wrangler@latest

pnpm add -D wrangler@latest

bun add -d wrangler@latest

1. Add a Wrangler configuration file.

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

jsonc { "$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-10-27", "compatibility_flags": [ "nodejs_compat" ], "assets": { "directory": ".open-next/assets", "binding": "ASSETS" }, "observability": { "enabled": true } }

```toml name = "my-app" main = ".open-next/worker.js" upload_source_maps = true # Set this to today's date compatibility_date = "2026-10-27" 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. 4. Add an OpenNext configuration file.

In your project root, create open-next.config.ts:

```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 ↗︎. 5. Update package.json.

Add scripts for previewing, deploying, and generating Cloudflare types:

json { "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" } }

<details><summary>

Script usage</summary>

• <code>preview</code>: Builds your app and serves it locally in the Workers runtime.
• <code>deploy</code>: Builds your app and deploys it to Cloudflare Workers.

• <code>cf-typegen</code>: Generates <code>cloudflare-env.d.ts</code> with Cloudflare binding types.</details>

• Develop locally.

Start the Next.js development server.npmyarnpnpm

npm run dev

yarn run dev

pnpm run dev

1. Preview with OpenNext.

Preview your application in the Workers runtime.npmyarnpnpm

npm run preview

yarn run preview

pnpm run preview

1. Deploy your project.

Deploy your project to Cloudflare Workers.npmyarnpnpm

npm run deploy

yarn run deploy

pnpm 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 ↗︎.

Was this helpful?

YesNo

On this page

Docs

{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/workers/framework-guides/web-apps/opennext/#page","headline":"OpenNext adapter","description":"Deploy a Next.js application to Cloudflare Workers with the OpenNext adapter.","url":"https://developers.cloudflare.com/workers/framework-guides/web-apps/opennext/","inLanguage":"en","image":"https://developers.cloudflare.com/workers/framework-guides/web-apps/opennext/og.png?v=bce65b3f527427ee","dateModified":"2026-10-12","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"},"keywords":["full-stack"]}

description: Create a new React + Vite application or deploy an existing one to Cloudflare Workers with Workers Assets. title: React + Vite image: https://developers.cloudflare.com/workers/framework-guides/web-apps/react/og.png?v=757a34c0abb4669e

Skip to content

Documentation Index
Fetch the complete documentation index at: https://developers.cloudflare.com/workers/llms.txt
Use this file to discover all available pages before exploring further.