cloudflare-opennext

Cloudflare OpenNext

Deploy Next.js applications to Cloudflare Workers using the @opennextjs/cloudflare adapter with full support for App Router, Pages Router, ISR, SSG, and Cloudflare bindings.

When to Use

• Creating new Next.js apps for Cloudflare Workers
• Migrating existing Next.js apps to Cloudflare
• Configuring ISR/SSG caching with R2, KV, or D1
• Accessing Cloudflare bindings (KV, R2, D1, Durable Objects, AI)
• Using databases and ORMs (Drizzle, Prisma) in Next.js
• Troubleshooting deployment issues or bundle size problems

Getting Started

New App

npm create cloudflare@latest -- my-next-app --framework=next --platform=workers
cd my-next-app
npm run dev      # Local development with Next.js
npm run preview  # Preview in Workers runtime
npm run deploy   # Deploy to Cloudflare

Existing App Migration

# 1. Install dependencies
npm install @opennextjs/cloudflare@latest
npm install --save-dev wrangler@latest

# 2. Create wrangler.jsonc (see Configuration section)
# 3. Create open-next.config.ts
# 4. Update next.config.ts
# 5. Add scripts to package.json
# 6. Deploy
npm run deploy

Core Concepts

How OpenNext Works

The @opennextjs/cloudflare adapter:

1. Runs next build to generate the Next.js build output
2. Transforms the build output to work in Cloudflare Workers runtime
3. Outputs to .open-next/ directory with worker.js entry point
4. Uses Workers Static Assets for static files (_next/static, public)

Node.js Runtime (Not Edge)

Critical: OpenNext uses Next.js Node.js runtime, NOT the Edge runtime:

// ❌ Remove this - Edge runtime not supported
export const runtime = "edge";

// ✅ Default Node.js runtime - fully supported
// No export needed, this is the default

The Node.js runtime provides:

• Full Node.js API compatibility via nodejs_compat flag
• More Next.js features than Edge runtime
• Access to all Cloudflare bindings

Configuration Files

wrangler.jsonc