Vercel & Cloudflare Deployment Guide

Deploy the THUNDER Next.js web client to Vercel or Cloudflare Pages, and deploy the Hono API server globally to Cloudflare Workers with Wrangler.

1. Vercel (Frontend)

Zero-config deployment for the Next.js App Router client using root vercel.json.

2. Cloudflare Pages (Frontend)

Edge deployment for Next.js using @cloudflare/next-on-pages.

3. Cloudflare Workers (Backend)

Sub-millisecond global execution for the Hono REST API server using Wrangler.

Deploying Next.js Frontend to Vercel

Official Vercel Web Dashboard import & zero-config deployment guide.

1Vercel Web Dashboard Import (Recommended)

When importing your GitHub repository into the Vercel Web Dashboard:

Root Directory: Click Edit next to Root Directory and set it to ./ (Root Directory).

Framework Preset: Select Next.js.

Environment Variables: Add NEXT_PUBLIC_IS_DOCS_ONLY = true.

💡 Why `./` Root Directory? The repository includes a root vercel.json file. Setting Root Directory to ./ enables zero-config deployment so Vercel automatically runs pnpm --filter nextjs build without requiring manual command overrides!

2Manual Overrides (If Root Directory is set to `client/nextjs`)

If you keep the Root Directory as client/nextjs, toggle the Build and Output Settings override switches to ON:

Build Command Override: pnpm build
Install Command Override: pnpm install --prefix=../..
Environment Variable: NEXT_PUBLIC_IS_DOCS_ONLY=true

3Environment Variables Reference

Variable Key	Docs-Only Live Site	Full App Deployment
NEXT_PUBLIC_IS_DOCS_ONLY	true	false
NEXT_PUBLIC_SERVER_URL	https://your-hono-api.workers.dev	https://your-hono-api.workers.dev

Deploying Next.js Frontend to Cloudflare Pages

Deploying Next.js edge assets using the modern, officially recommended @opennextjs/cloudflare adapter.

Build & Deploy Commands

# Step 1: Build Next.js for Cloudflare Pages (OpenNext)

pnpm build:web:cf

# Step 2: Deploy compiled output (.open-next/.deploy) to Cloudflare

pnpm deploy:web:cf

Ensure the nodejs_compat compatibility flag is enabled in your Cloudflare Pages project settings under Settings > Functions > Compatibility flags.

Deploying Hono Backend to Cloudflare Workers

Global serverless API deployment using Wrangler CLI.

Wrangler Deployment Walkthrough

# Step 1: Set Secret Environment Variables in Cloudflare

npx wrangler secret put DATABASE_URL --cwd server/hono npx wrangler secret put BETTER_AUTH_SECRET --cwd server/hono

# Step 2: Deploy Backend to Cloudflare Workers

pnpm deploy:server

Need Database CLI Assistance?

Learn how to generate schema migrations, seed roles, and run diagnostic status checks.

View Database Guide