Deploying Next.js to Cloudflare Workers

Next.js is a powerful React framework, and Cloudflare Workers provides a global edge network. Combining them creates incredibly fast web applications.

Why Cloudflare Workers?

Traditional hosting runs your application in one or a few locations. Cloudflare Workers runs your code in over 300 locations worldwide, bringing your application closer to your users.

Setting Up Your Project

First, create a new Next.js application:

npx create-next-app@latest my-edge-app
cd my-edge-app

Installing OpenNext

OpenNext is the bridge between Next.js and Cloudflare Workers:

npm install @opennextjs/cloudflare

Configuration

Create a wrangler.toml file in your project root:

name = "my-edge-app"
main = ".open-next/worker.js"
compatibility_date = "2025-01-06"
compatibility_flags = ["nodejs_compat"]

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

Building and Deploying

Build your application for Cloudflare:

npx opennextjs-cloudflare build
npx opennextjs-cloudflare deploy

Performance Benefits

Running Next.js on Cloudflare Workers provides:

• Global distribution by default
• Automatic scaling
• Zero cold starts
• Built-in DDoS protection

Conclusion

Deploying Next.js to Cloudflare Workers combines the best of both worlds: a powerful framework with a global edge network.