Easy Deployment: Cloudflare Workers & Pages

This guide shows you how to deploy your full-stack Next.js app (with Clerk auth and Neon Postgres) to Cloudflare using a single command.

Prerequisites

1. Install Wrangler CLI:
   npm install wrangler@latest -g

2. Install Bun if you haven't:
   npm install -g bun

3. Make sure you have a Cloudflare account and your Neon database is ready.

One-Command Deployment

From your apps/www directory, just run:

bun run deploy

This will:

• Build your Next.js app for Cloudflare Pages (bunx @cloudflare/next-on-pages)
• Deploy your app to Cloudflare Pages and (optionally) your Worker API

What happens under the hood?

• The deploy script in package.json runs:
  "deploy": "bun pages:build && wrangler pages deploy"

• This builds your app and deploys it to Cloudflare Pages.
• If you have a Worker API, you can add a step to deploy it with Wrangler as well.

Environment Variables

Set your secrets in the Cloudflare dashboard for both Pages and Workers:

• CLERK_PUBLISHABLE_KEY, CLERK_SECRET_KEY (for Clerk)
• DATABASE_URL (for Neon)
• Any other secrets

For Workers:

wrangler secret put DATABASE_URL
wrangler secret put CLERK_SECRET_KEY

For Pages:

• Go to Cloudflare Pages dashboard → Project → Settings → Environment Variables

Connecting Frontend to Worker API

In your frontend code, set the API base URL to your Worker deployment URL in production:

function getBaseUrl() {
  if (process.env.NODE_ENV === "production") {
    return "https://<YOUR_WORKER>.workers.dev";
  }
  return "http://localhost:8080";
}

Summary Table

| Step | Command/Action | Notes | |---------------------|------------------------------------------------|--------------------------------------------| | Install Wrangler | npm install -g wrangler | | | Install Bun | npm install -g bun | | | Deploy (all) | bun run deploy | Builds and deploys to Cloudflare Pages | | Set Worker Secrets | wrangler secret put <KEY> | For DATABASE_URL, Clerk keys, etc. | | Set Pages Env Vars | Cloudflare Pages dashboard | For frontend env vars | | Configure CORS | See CORS section below | Allow frontend domain |

CORS Configuration

If your frontend and backend are on different domains, make sure your Worker API enables CORS for your frontend's domain.

// Example: Enable CORS in your Worker
const api = j
  .router()
  .basePath("/api")
  .use(j.defaults.cors)
  .onError(j.defaults.errorHandler)

Production Deployment Flow

1. Run bun run deploy to build and deploy your app.
2. Set all required environment variables in Cloudflare Pages and Workers.
3. Your frontend will connect to your Worker API in production.
4. Done!

Troubleshooting

• Double-check all environment variables are set in the Cloudflare dashboard.
• Use the Neon serverless driver (@neondatabase/serverless) for best compatibility.
• If you have custom API logic, add a wrangler deploy step for your Worker in the deploy script.

You now have a one-command deploy for your full-stack Next.js + Clerk + Neon app on Cloudflare!