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

> Deploy Next AI Draw.io on Cloudflare Workers with this complete guide. Configure environment variables, app settings, and deploy your Worker efficiently.

- Repository: [Dayuan Jiang/next-ai-draw-io](https://github.com/DayuanJiang/next-ai-draw-io)
- Tags: how-to-guide
- Published: 2026-07-13

---

**To deploy Next AI Draw.io on Cloudflare Workers, install dependencies, configure environment variables in `.dev.vars`, set up your [`open-next.config.ts`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/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:

```bash
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`:

```bash

# 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`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/open-next.config.ts):

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

export default defineCloudflareConfig({});

```

Create `wrangler.jsonc`:

```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`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/open-next.config.ts):

```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:

```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"
  },
  "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`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/package.json):

```bash
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`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/.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:

```bash
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`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/.open-next/worker.js).
- Configure deployment through **[`open-next.config.ts`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/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`](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/.open-next/worker.js), and uploads the new version to Cloudflare Workers. The deployment is atomic, meaning there is no downtime during updates.