Deploy your existing Next.js project globally with Cloudflare Workers and the OpenNext adapter! This guide walks you through every step, from installing dependencies to setting up CI/CD for automatic deployments.

Prerequisites

• Existing Next.js project (v12+ recommended)
• Node.js ≥ 14.18, npm or Yarn
• Cloudflare account with Workers permissions
• (Optional) GitHub repo for CI/CD

---

1. Install OpenNext & Wrangler

Install the OpenNext Cloudflare adapter and Wrangler CLI as dev dependencies:

# filepath: Terminal
npm install --save-dev @opennextjs/cloudflare wrangler@latest

# filepath: Terminal
yarn add -D @opennextjs/cloudflare wrangler
# or
pnpm add -D @opennextjs/cloudflare wrangler

---

2. Create wrangler.toml

At your project root, add a wrangler.toml file:

# filepath: wrangler.toml
main = ".open-next/worker.js"
name = "my-app"
compatibility_date = "2025-03-25"
compatibility_flags = ["nodejs_compat"]

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

• main: Points to the Worker entry generated by OpenNext.
• compatibility_flags: Must include nodejs_compat and a date ≥ 2024‑09‑23 for Next.js support.

---

3. Add OpenNext Config

Create open-next.config.ts in your root:

// filepath: open-next.config.ts
import { defineCloudflareConfig } from "@opennextjs/cloudflare";

export default defineCloudflareConfig();

For local development, add a .dev.vars file:

# filepath: .dev.vars
NEXTJS_ENV=development

Add .open-next/ to your .gitignore to avoid committing build artifacts.

---

4. Update package.json Scripts

Add or update these scripts in your package.json:

// filepath: package.json
{
  // ...existing code...
  "scripts": {
    "preview":   "npx opennextjs-cloudflare build && npx opennextjs-cloudflare preview",
    "deploy":    "npx opennextjs-cloudflare build && npx wrangler deploy",
    "cf-typegen":"wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts"
    // ...other scripts...
  }
  // ...existing code...
}

• preview: Builds and runs Miniflare locally.
• deploy: Builds and publishes to Workers.
• cf-typegen: Generates TypeScript bindings for your Cloudflare environment.

---

5. Preview Locally

Run:

# filepath: Terminal
npm run preview

You’ll see OpenNext build logs and then a Miniflare server at http://localhost:8787 running your Next.js app in the Workers environment.

---

6. Authenticate with Wrangler

Before deploying, log in to your Cloudflare account:

# filepath: Terminal
npx wrangler login

This opens a browser window to grant API permissions.

---

7. Deploy to Cloudflare Workers

With everything configured, deploy your app:

# filepath: Terminal
npm run deploy

Wrangler will publish your Worker and show your live URL, e.g. https://my-app.workers.dev.

---

8. Continuous Deployment via GitHub Actions

Add .github/workflows/deploy.yml for CI/CD:

# filepath: .github/workflows/deploy.yml
name: Deploy to Cloudflare Workers
on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20'
      - name: Install dependencies
        run: npm ci
      - name: Build & Deploy
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          command: deploy

Store your Cloudflare API token in GitHub Secrets as CLOUDFLARE_API_TOKEN.

---

Conclusion

You’ve transformed your existing Next.js project into a Cloudflare Workers deployment! With OpenNext, Wrangler, and a few config files, you get global edge performance and GitOps-style CI/CD.

Don’t forget to add screenshots and diagrams to make your blog post even more helpful!