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 with zero double-compilation.

1. 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

Cloudflare Dashboard CI Settings

In Cloudflare Dashboard CI, configure:

Build Command: pnpm run build (or pnpm build:web:cf)
Deploy Command: pnpm run deploy (or pnpm deploy:web:cf)
Build Output Directory: client/nextjs/.open-next/.deploy

Separating the build and deploy commands eliminates double compilation, saving ~60s on every deployment.

Build-Time Inlining (`vars` in `wrangler.jsonc`) vs Secrets

In Cloudflare CI, encrypted Secrets are not passed during Next.js compilation. Store public configuration in client/nextjs/wrangler.jsonc under "vars":

"vars": {
  "NODE_ENV": "production",
  "NEXT_PUBLIC_SERVER_URL": "https://thunder-server.workers.dev"
}

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

PostgreSQL & Aiven SSL Configuration

Connecting Drizzle ORM to Aiven, Supabase, Neon, or AWS RDS with zero TLS/CA errors.

Cloud PostgreSQL providers like Aiven require encrypted TLS/SSL connections. Ensure your connection string ends with ?sslmode=require:

DATABASE_URL="postgres://avnadmin:PASSWORD@host.aivencloud.com:PORT/defaultdb?sslmode=require"

Custom CA Certificates & Serverless Workers

Thunder Stack's database client (server/db/src/client.ts) automatically strips query parameters and applies ssl: { rejectUnauthorized: false } for remote connections. This avoids Error: self-signed certificate in certificate chain issues in Cloudflare Workers and container runtimes while maintaining TLS encryption.

Need Database CLI Assistance?

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

View Database Guide