How to Deploy Next AI Draw.io on Cloudflare Workers: A Complete Guide

To deploy Next AI Draw.io on Cloudflare Workers, install dependencies, configure environment variables in .dev.vars, set up your open-next.config.ts and wrangler.jsonc configuration files, then run npm run deploy to publish the OpenNext-built Worker to your workers.dev subdomain.

Next AI Draw.io is a Next.js application that runs on Cloudflare's edge network using the OpenNext adapter. This deployment method converts your Next.js build into a Worker script that executes at the edge, offering global low latency without maintaining a traditional server. The process leverages Wrangler CLI to upload static assets and the Worker code directly to Cloudflare.

Prerequisites

Before you begin deploying Next AI Draw.io on Cloudflare Workers, ensure you have the following requirements:

• Cloudflare account – The free tier is sufficient for most use cases.
• Node.js 18+ – Verify with node -v.
• Wrangler CLI – Install as a dev dependency with npm install -D wrangler or use npx wrangler.
• Cloudflare authentication – Run npx wrangler login to authenticate your CLI.

Important Windows Note: OpenNext and Wrangler are not fully reliable on native Windows due to WASM filename handling issues (specifically resvg.wasm?module errors). Use WSL, GitHub Codespaces, or a Linux environment for building and deploying.

Project Setup and Environment Configuration

Start by installing the project dependencies:

npm install

Next, configure your environment variables. The Cloudflare platform uses .dev.vars for local testing and deployment, while standard Next.js development uses .env.local:

# For Cloudflare deployment and local preview

cp env.example .dev.vars

# For regular Next.js development

cp env.example .env.local

Both files must contain identical key-value pairs, including your API keys and secret keys. Edit these files to include your actual configuration values before proceeding.

Configuration Options

Choose between two deployment configurations based on whether you need Incremental Static Regeneration (ISR) caching.

Option A: Deployment Without R2 (Free Tier)

Use this minimal configuration if you do not require ISR caching. This keeps your deployment entirely within Cloudflare's free tier without R2 storage costs.

Create open-next.config.ts:

import { defineCloudflareConfig } from "@opennextjs/cloudflare/config";

export default defineCloudflareConfig({});

Create wrangler.jsonc:

{
  "$schema": "node_modules/wrangler/config-schema.json",
  "main": ".open-next/worker.js",
  "name": "next-ai-draw-io-worker",
  "compatibility_date": "2025-12-08",
  "compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
  "assets": {
    "directory": ".open-next/assets",
    "binding": "ASSETS"
  },
  "services": [
    {
      "binding": "WORKER_SELF_REFERENCE",
      "service": "next-ai-draw-io-worker"
    }
  ]
}

Option B: Deployment With R2 (Full ISR Support)

Select this option if your application requires Incremental Static Regeneration. This setup uses Cloudflare R2 as a cache store for regenerated pages.

First, create an R2 bucket named next-inc-cache in the Cloudflare dashboard. The bucket_name in your configuration must match exactly.

Configure open-next.config.ts:

import { defineCloudflareConfig } from "@opennextjs/cloudflare/config";
import r2IncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache";

export default defineCloudflareConfig({
  incrementalCache: r2IncrementalCache,
});

Configure wrangler.jsonc with the R2 binding:

{
  "$schema": "node_modules/wrangler/config-schema.json",
  "main": ".open-next/worker.js",
  "name": "next-ai-draw-io-worker",
  "compatibility_date": "2025-12-08",
  "compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
  "assets": {
    "directory": ".open-next/assets",
    "binding": "ASSETS"
  },
  "r2_buckets": [
    {
      "binding": "NEXT_INC_CACHE_R2_BUCKET",
      "bucket_name": "next-inc-cache"
    }
  ],
  "services": [
    {
      "binding": "WORKER_SELF_REFERENCE",
      "service": "next-ai-draw-io-worker"
    }
  ]
}

Deploying to Cloudflare Workers

Register Your workers.dev Subdomain

If this is your first Cloudflare Workers deployment, you must register a workers.dev subdomain. Navigate to Workers & Pages → Overview → Set up a subdomain in the Cloudflare dashboard. Alternatively, the CLI will prompt you to create one during your first deployment attempt.

Execute the Deployment

Run the deployment command defined in package.json:

npm run deploy

This command executes opennextjs-cloudflare build && opennextjs-cloudflare deploy, which performs three critical steps:

1. next build – Compiles the Next.js application.
2. OpenNext bundling – Converts the build output into a Worker script at .open-next/worker.js.
3. Wrangler upload – Publishes static assets from .open-next/assets and deploys the Worker script.

Upon successful completion, your application will be available at:

https://<worker-name>.<your-subdomain>.workers.dev

Local Preview

Test your Cloudflare Worker locally before deploying to production:

npm run preview

This command builds the application and runs the Worker locally using the OpenNext adapter, allowing you to verify functionality with your .dev.vars environment variables.

Troubleshooting Common Deployment Issues

Symptom	Cause	Solution
You need to register a workers.dev subdomain	No subdomain created for your account	Register a subdomain in the Cloudflare dashboard under Workers & Pages
Please enable R2 through the Cloudflare Dashboard	R2 not enabled or missing payment method	Add a payment method to enable R2, or switch to Option A (no R2 config)
No R2 binding "NEXT_INC_CACHE_R2_BUCKET" found	Missing or incorrect r2_buckets in wrangler.jsonc	Verify the r2_buckets array contains the correct binding name matching your R2 bucket
Can't set compatibility date in the future	compatibility_date set beyond today's date	Update compatibility_date in wrangler.jsonc to today's date or earlier
Windows resvg.wasm?module ENOENT error	Illegal filename characters on Windows filesystem	Build and deploy from WSL, Linux, or GitHub Codespaces

Summary

• Next AI Draw.io deploys to Cloudflare Workers via the OpenNext adapter, which bundles the Next.js app into a Worker-compatible script at .open-next/worker.js.
• Configure deployment through open-next.config.ts (for cache behavior) and wrangler.jsonc (for bindings and assets).
• Store environment variables in .dev.vars for Cloudflare deployments, maintaining parity with .env.local for local development.
• Choose between free-tier deployment (no R2) or ISR-enabled deployment (with R2 bucket binding) based on your caching requirements.
• Run npm run deploy to build and publish, avoiding native Windows environments due to WASM filename incompatibilities.

Frequently Asked Questions

What is the difference between .dev.vars and .env.local?

.dev.vars is the Cloudflare-specific environment file used by Wrangler and OpenNext for local preview and deployment to Workers. .env.local is the standard Next.js environment file used during regular development with next dev. Both files must contain identical values, as the application reads from .env.local during standard Next.js builds and from .dev.vars when running as a Cloudflare Worker.

Why does the deployment fail with a WASM module error on Windows?

The OpenNext build process generates WASM files with ?module suffixes in their names, which are illegal characters on Windows filesystems. This causes ENOENT errors when building or deploying. To resolve this, use Windows Subsystem for Linux (WSL), GitHub Codespaces, or a Linux machine for the build and deployment process.

Do I need R2 storage to deploy Next AI Draw.io?

No, R2 is optional. For simple deployments without Incremental Static Regeneration (ISR), use Option A with an empty defineCloudflareConfig({}) and omit the r2_buckets section from wrangler.jsonc. This keeps your deployment entirely within Cloudflare's free tier. Only configure R2 if your application specifically requires ISR caching capabilities.

How do I update my deployed Worker after making code changes?

Simply run npm run deploy again after modifying your code. The command rebuilds the application using next build, repackages it with OpenNext into .open-next/worker.js, and uploads the new version to Cloudflare Workers. The deployment is atomic, meaning there is no downtime during updates.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}