Cloudflare
vinext-deploy-guide v1.0

How to deploy your Next.js app on the Cloudflare Worker using Vinext + Workers Deployment

╔═════════════════════════════════════════════════════════════╗
║  $ vinext-deploy-guide                                                 ║
║  Cloudflare Workers + Vinext Deployment                                ║
╚═════════════════════════════════════════════════════════════╝

1️⃣ Create Next.js 16 App

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

Choose:

  • App Router
  • TypeScript (optional)
  • No experimental extras

2️⃣ Install vinext + required dependencies

$ npm install vinext
$ npm install -D @vitejs/plugin-rsc
$ npm install react@19.2.4 react-dom@19.2.4
$ npm install react-server-dom-webpack@19.2.4

3️⃣ Convert project to ESM

Add to package.json:

"type": "module"

4️⃣ Update Scripts

Replace scripts with:

"scripts": {
  "dev": "vinext dev",
  "build": "vinext build"
}

We will NOT use vinext deploy on Windows.

5️⃣ Disable Next Image Optimization (important for Workers)

⚠️ Vinext maturity limitation: it currently does not support image optimization. Use the regular <img> tag instead of Next.js Image component.

Edit next.config.ts:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    unoptimized: true,
  },
};

export default nextConfig;

6️⃣ Install Wrangler CLI Globally

$ npm install -g wrangler

Login:

$ wrangler login

7️⃣ Build Project for Workers

$ npx vinext build

8️⃣ Deploy to Cloudflare Workers

$ wrangler deploy --config dist/server/wrangler.json

You will receive:

https://your-app.username.workers.dev

Test it.

🌍 Attach Custom Domain

Assuming domain already uses Cloudflare DNS.

Step 1 — Add DNS Record

Cloudflare Dashboard → DNS → Add Record:

Type: CNAME
Name: vinext
Target: your-app.username.workers.dev
Proxy: ON

Step 2 — Attach Domain to Worker

Cloudflare → Workers → Your Worker → Settings → Triggers → Custom Domains

Add:

vinext.yourdomain.com

SSL will auto-provision.

🔁 Optional: Git Auto Deploy

If using GitHub:

Cloudflare → Workers & Pages → Create → Connect Repo

Build command:

npx vinext build

Deploy command:

wrangler deploy --config dist/server/wrangler.json

🔗 How to connect your app to the custom domain

Make sure your main domain is already on Cloudflare.

Edit wrangler.jsonc and add the routes configuration:

"routes": [
  {
    "pattern": "vinext.yourdomain.com",
    "custom_domain": true
  }
]

Replace vinext.yourdomain.com with your subdomain. Redeploy with wrangler deploy.

⚠️ Important Notes

  • Do not use Node APIs like fs, net, child_process
  • No native modules
  • Workers runtime only
  • Keep bundle under size limits
  • Use environment variables via Wrangler