AI Coding Tools

Deploy Apps with Claude Code to Vercel & Cloudflare (2026)

Aug 14, 202614 min read

Deploying an app with Claude Code means you tell it to run vercel or wrangler right inside your terminal: it installs the CLI, logs in, builds, ships to production, then reads the logs and fixes errors for you. You still need a Vercel or Cloudflare account and you still handle the login yourself - the AI drives the commands, it does not magically own the hosting. Pick Vercel for a smooth, fast Next.js/SSR app; pick Cloudflare for static sites, the edge, or cheap full-stack Workers.

What does deploying with Claude Code mean? Can it deploy on its own?

If you just used Claude Code to build a Next.js app or a static site and now you want it live on the web, here is the good news: you never have to leave the terminal. Deploying with Claude Code simply means letting it run the shell commands for you - install the platform CLI, log in, run the build, push the code, then read the logs to catch and fix errors in a loop.

The key point: Claude Code runs real terminal commands. It does not simulate them. When you say "deploy this project to Vercel," it actually calls vercel --prod, waits for the result, and if the build fails it reads the error message and proposes a fix. That is exactly what makes this different from copy-pasting commands out of a blog post. If you are new to the tool, skim what Claude Code is first to understand how it runs commands in a sandbox.

But it does NOT "deploy by magic." Three things a human still has to do:

  • You need a Vercel or Cloudflare account (the free tier is fine to start).
  • The first time, the login step usually opens a browser for you to confirm - Claude Code does not sign into your account for you.
  • You decide the platform, domain, and environment variables - the AI can suggest, but you make the call.

In short: the AI handles the repetitive command work and the annoying log-reading; you handle the decisions and the accounts. Getting that split straight keeps your expectations sane.

Why is this worth doing instead of deploying by hand? Three practical reasons. First, you do not have to memorize each platform's commands - vercel and wrangler have different syntax, and both change fairly fast. Second, the fix loop is shorter: when a build fails, the AI reads the log right there instead of you copying the error off to search the web. Third, context stays intact - Claude Code is sitting in the same folder that just built the app, so it knows the project structure, which framework you used, and where the output lives. That is a big difference from pasting commands from a guide that knows nothing about your code.

Before you deploy (checklist)

Whether a deploy goes smoothly is mostly decided during prep. Before you tell Claude Code to push the app to production, confirm all of these:

  • Clean git repo: everything committed, no dangling changes. If this part is new to you, see the git workflow with Claude Code.
  • npm run build succeeds on your machine. This is condition number one. If the build fails locally, it will absolutely fail on the server - do not deploy "just to see what happens."
  • Know your framework: Next.js, Vite/React, or static HTML. The platform and deploy command differ by type.
  • Have an account on Vercel or Cloudflare.
  • .gitignore already blocks .env and lock files. Double-check this line.

Security warning: Do not let Claude Code commit .env or API keys to git. Before you let it run git add -A, make sure .gitignore contains .env and .env.local. Secrets belong in the platform dashboard or in wrangler secret, not in your code.

If your app has a server side (API routes, a database), it is also worth reading building backends and APIs with Claude Code so you know which environment variables the app needs before it goes to production. Get this list right and the deploy steps below usually take just a few minutes.

Method 1 - Deploy to Vercel with Claude Code

Vercel is the smoothest choice for Next.js and SSR apps: much of it is nearly "click and done." Here is the CLI flow you can have Claude Code run step by step:

  1. Install the Vercel CLI: npm i -g vercel
  2. Log in: vercel login - this opens a browser for you to authenticate (the step you do yourself).
  3. Link the project: vercel link - connects the current folder to a project on Vercel.
  4. Create a preview: run vercel (no flags) to build a preview URL and check it first.
  5. Set environment variables: via the Vercel dashboard or vercel env add VAR_NAME.
  6. Ship to production: vercel --prod.

In Claude Code you do not need to type each command above. A prompt like this is enough:

Deploy this project to Vercel. Run vercel link first,
create a preview for me to check, then ask me before
running vercel --prod. If the build fails, read the
log and suggest a fix.

Claude Code will run the command chain, stop at the preview for you to look at, and only ship to production once you approve. If the build fails, it reads the error output and fixes it - this is where "the AI reads the log" saves obvious time.

New in 2026: Vercel has an official Claude Code plugin and a Vercel MCP connector that let Claude Code work with Vercel more cleanly (manage projects, read deployments). If you deploy to Vercel often, both are worth a try.

For Next.js/SSR, Vercel's big advantage is that you barely configure the runtime - the framework is auto-detected and you "just deploy." Server Components, API routes, and middleware all run without an adapter. The trade-off: costs can climb quickly under heavy traffic (see the comparison table below).

Use previews the right way: always run vercel (the preview) before --prod. A preview gets its own URL and uses the exact code you are about to ship, but without touching real users. Open that URL, click through a few core flows, and only then let Claude Code push to production. It is a cheap habit that saves you from shipping a broken build to your main domain.

Method 2 - Deploy to Cloudflare with Claude Code (Pages & Workers)

Cloudflare fits when you want it cheap, running at the edge, or full-stack with Workers (KV, D1, R2). The main tool is wrangler. The steps:

  1. Install Wrangler: npm i -g wrangler (or use npx wrangler for a quick one-off).
  2. Log in: wrangler login - opens a browser to authenticate.
  3. Build the app: npm run build to produce the output folder.
  4. Deploy Pages: wrangler pages deploy <build-folder> (for example dist with Vite, or your framework's build folder).
  5. Set secrets: wrangler secret put SECRET_NAME or via the dashboard - never hardcode them in the code.
  6. Attach a domain + SSL: add a custom domain in the dashboard; Cloudflare provisions SSL automatically.

A sample prompt for Claude Code:

Build this app and deploy it to Cloudflare Pages with wrangler.
After it deploys, show me the .pages.dev URL so I can check it.
Remind me which secrets I need to set with wrangler secret put.

The Next.js-on-Cloudflare trap (read carefully): Next.js does not run directly on Cloudflare Pages/Workers the way it does on Vercel. You need an adapter layer:

  • @cloudflare/next-on-pages - an adapter that builds Next.js for Cloudflare Pages, running on the edge runtime.
  • OpenNext (@opennextjs/cloudflare) - the newer direction, with better support for the Workers Node runtime for complex Next.js apps. See the OpenNext for Cloudflare docs.

Both usually require enabling the Node compatibility flag (nodejs_compat) in your config. Skip that step and you will hit cryptic runtime errors - this is exactly what the Vercel-only guides leave out. You can tell Claude Code: "this app is Next.js, use OpenNext to deploy it to Cloudflare and turn on nodejs_compat for me."

Cloudflare also has agent-setup docs for Claude Code describing how to connect an AI agent to Cloudflare infrastructure. For dynamic logic (database, cache, file storage), use Workers together with KV/D1/R2 instead of cramming everything into static Pages: KV for fast key-value, D1 for a SQL database, R2 for S3-style object storage with no egress fees. You can have Claude Code create bindings to these services in wrangler.toml and then write the corresponding read/write code.

Compared to Vercel, the trade-off with Cloudflare is a bit more configuration in exchange for more flexibility and lower cost at scale. If your app is just static/SPA, there is barely any trade-off - Pages takes the build folder and serves it at the edge right away. It is only when you get to Next.js SSR that the adapter complexity really shows up.

Vercel or Cloudflare? A platform-picker table

There is no "best platform," only the one that fits your kind of app. The table below helps you choose fast based on the type of project Claude Code generated:

App typePickWhyStarting cost
Static / SPA (Vite, plain React, HTML)Cloudflare PagesWide edge network, generous bandwidth, super-fast deploysFree tier available
Next.js / SSRVercelAuto framework detection, smoothest DX, near zero-configFree tier (Hobby)
API / functions at the edgeCloudflare WorkersLow global latency, cheap at scaleFree tier available
Full-stack needing DB/cache/storageCloudflare Workers + D1/KV/R2Database, key-value, and object storage built inFree tier available
Next.js but you want it very cheapCloudflare + OpenNextCheaper at high traffic, in exchange for more configFree tier available

Quick verdict: Vercel gives the smoothest Next.js experience with the least thinking; Cloudflare gives low cost, the edge, and full-stack with Workers. Both have a free tier that is plenty for a personal app or side project. If you are unsure, start on both free tiers and let Claude Code deploy to each, then compare.

Handling common deploy errors

Deploys rarely sail through cleanly on the first try. Claude Code's strength here is reading the deploy log and fixing in a loop - you paste the error or just tell it to "read that output and fix it." Here are the errors you will hit most and how to handle them:

  • Build fails the first time. Usually a missing dependency or a wrong build script. Tell Claude Code: "read the build log that just failed, find the missing dep or the wrong script in package.json, and fix it." This is the most common error and also the easiest to fix.
  • Missing environment variables → the app deploys but shows a blank page or a 500. Check whether the variables are set in the dashboard; remember that local vars in .env do NOT travel to the server on their own.
  • Next.js edge-runtime error on Cloudflare. Signs: "module not found" or a Node API that does not exist. Fix: use @cloudflare/next-on-pages or OpenNext and enable nodejs_compat (see the Cloudflare section above).
  • Node version mismatch. Local uses Node 20 but the server defaults to something else → different build results. Declare the version in the project config or in package.json (engines).
  • Committed a secret by accident. If an API key made it into git, rotate (revoke and regenerate) the key immediately - deleting the commit is not enough because the key is already exposed in the history. Then move the secret to the dashboard/wrangler secret where it belongs.

If you hit an error inside the Claude Code session itself (rather than on the platform side), see the common Claude Code errors. General tip: do not blindly redeploy - always let the AI read the specific log before it fixes anything.

Automate it: git push → live (CI/CD & previews)

Manual CLI deploys are great for the first time, but long term you want every git push to go live automatically. Both Vercel and Cloudflare Pages support connecting directly to a GitHub repo:

  • Connect the repo in the platform dashboard → every push to the main branch auto-deploys to production.
  • Preview deployments = real QA. Every pull request gets its own preview URL so you (or a reviewer) can check it before merging. This is nearly free QA, so do not skip it.
  • One-command rollback. If a new build breaks, roll back to the previous one almost instantly in the dashboard - no panic needed.

You can have Claude Code write the config file too: vercel.json for Vercel, wrangler.toml for Cloudflare, or a GitHub Actions workflow if you want fine-grained pipeline control. Combined with the git workflow with Claude Code, you get a tight development loop: code → push → preview → merge → live.

Deploy faster with a prebuilt skill (ak-deploy)

Instead of remembering and typing each vercel/wrangler command, you can use a prebuilt deploy skill. ak-deploy auto-detects the deploy target from your project config or a docs/deployment.md file - it supports Vercel, Cloudflare, Netlify, Railway, Fly.io and many more - so usually one sentence like "deploy this app" is enough for it to pick the right flow. For heavier infrastructure (Cloudflare Workers/R2/D1, Docker, Kubernetes), ak-devops handles that side.

These skills live in the Engineer Kit (which includes the ak-deploy skill) - part of the AgentKit bundle for Claude Code — now $149 (from $198) (agentkit.best, using the ak CLI). To be clear and avoid confusion: this is AgentKit, a pack of skills/agents for Claude Code, which is completely different from OpenAI's AgentKit. The Engineer Kit is $99 (the page lists no recurring fee), with lifetime updates and a money-back guarantee. If you want to understand how skills work in Claude Code first, see what skills in Claude Code are.

Frequently asked questions (FAQ)

Can Claude Code deploy on its own?

Yes - Claude Code runs real terminal commands, so it executes vercel/wrangler for you: installing the CLI, building, deploying, and reading logs to fix errors. But you still need a Vercel/Cloudflare account and you still handle the first-time login yourself.

Is Vercel or Cloudflare cheaper, and can I use them free?

Both have a free tier that is plenty for a personal app or side project. Cloudflare tends to be cheaper at high traffic and for static/edge apps; Vercel is smoother for Next.js/SSR. Check the pricing page for exact limits before you scale.

What do I need to deploy Next.js to Cloudflare?

Next.js does not run directly on Cloudflare. You need the @cloudflare/next-on-pages adapter or OpenNext (@opennextjs/cloudflare), and you usually have to enable the Node compatibility flag (nodejs_compat). On Vercel you do not need this step.

Can Claude Code leak my secrets?

Only if you let it commit .env/API keys to git. Prevent it: add .env to .gitignore and load secrets via the dashboard or wrangler secret put. If a key does leak, rotate (regenerate) it right away, because it is already in the git history.

What is the fastest way to deploy static HTML?

For a static site, the fastest path is wrangler pages deploy <folder> to Cloudflare Pages, or running vercel in the project folder. Have Claude Code run the command and hand you the live URL to check.

How do I roll back when a new build breaks?

Both Vercel and Cloudflare Pages let you roll back to the previous deployment right in the dashboard, almost instantly. Because each deploy is its own immutable build, rolling back is very safe - no rebuild required.

Conclusion & next steps

Deploying with Claude Code boils down to one principle: let the AI run the commands and read the logs, while you decide the platform and the accounts. Pick Vercel for Next.js and smooth DX, pick Cloudflare for cheap, edge, and full-stack with Workers. Get a clean repo, a build that runs locally, and secrets kept out of git, and you have already dodged 80% of the trouble.

Next step: if your app has a server side, see building backends and APIs with Claude Code; to automate push-to-live, see the git workflow with Claude Code.

Want Claude Code to deploy with a single command? The ak-deploy skill in the Engineer Kit auto-detects your platform and handles CI/CD too - handy when you deploy lots of projects and would rather not memorize each platform's commands.

Check out AgentKit (20% off via link) →

J

Jasmine

Author · Jasmine Daily

The writer behind Jasmine Daily - jotting down thoughts, experiences, and everyday moments. Honest, unhurried, imperfect.

Jasmine Daily

There's more waiting to be read.

If this piece spoke to you, browse a few more pages from the journal.

Read next

Related posts