Claude × Vercel Deploy | Publish Next.js with /deploy
The official plugin for deploying directly from Claude Code to Vercel has launched, enabling production deploys with a single /deploy command and real-time build log tracking via /vercel-logs. Vercel KB has also published a guide on safely running the Claude Agent SDK on Vercel Sandbox, organizing the Claude → Vercel integration into two paths: plugin-based and sandbox-based. This article covers the fastest route to publishing a Next.js project on Vercel, along with common pitfalls around custom domains and environment variables.
The official plugin for deploying directly from Claude Code to Vercel has launched, making it possible to publish to production with a single /deploy command and track build logs in real time with /vercel-logs.
Vercel KB has also published a guide on "safely running the Claude Agent SDK on Vercel Sandbox," organizing the Claude → Vercel integration into two paths: plugin-based and sandbox-based.
This article covers the fastest route to publishing a Next.js project on Vercel, along with common pitfalls around custom domains and environment variables.
目次 (9)
- 3 Things You Can Do with Claude × Vercel Integration
- Prerequisites: Node.js v18+ / Git / GitHub / Claude Paid Plan
- Initializing Vercel CLI with /vercel-setup
- Steps to Publish to Production with /deploy
- Real-Time Debugging with /vercel-logs
- Safely Running the Claude Agent SDK on Vercel Sandbox
- Steps to Connect a Custom Domain to Vercel
- Common Pitfalls: GitHub Permissions, DNS, and Environment Variables
- Summary: Where Claude × Vercel Shines — and Where It Doesn't
3 Things You Can Do with Claude × Vercel Integration
Combining Claude Code with Vercel lets you complete "production deploy," "log analysis," and "sandbox execution" without ever leaving your terminal. Three distinct workflows are available:
- Production deploy via
/deploy: Using the official Vercel plugin, you can publish your current project in a single command, similar to runningvercel --prod. - Log retrieval via
/vercel-logs: Add--followto switch to live streaming, then have Claude interpret build failures on the spot and automate retries. - Running the Claude Agent SDK on Vercel Sandbox: Run Claude Code CLI in an isolated vCPU environment, enabling safe parallel execution of code generation, file operations, and shell commands.
The official plugin has surpassed 100,000 installs (as of May 2026), making Vercel × Claude a de facto standard setup (Vercel Plugin for Claude Code official page).
Prerequisites: Node.js v18+ / Git / GitHub / Claude Paid Plan
There are four things to have in place before starting the integration. Missing even one will cause /vercel-setup to stall.
- Node.js v18 or higher: Required for Vercel CLI. Verify with
node -v. - Git client: Needed to push to GitHub and trigger Vercel's Git-linked deploys.
- GitHub account: Must be OAuth-connected to Vercel, with the repository either public or explicitly granted access if private.
- Claude paid plan (Pro / Max, etc.): Claude Code requires a paid plan, so
/deploywill not launch the plugin on the Free plan (Claude official pricing and plan information).
If GitHub permissions are insufficient for a private repository, the Vercel dashboard will show "no projects found." Go to the Vercel Integration settings and explicitly allow either all repositories or the specific repository you need.
Initializing Vercel CLI with /vercel-setup
The first command to run is /vercel-setup. Internally, it handles Vercel CLI authentication, project linking, and initial environment variable retrieval all at once.
- Run
/vercel-setupinside a Claude Code session. - On first run, a Vercel login page opens in your browser — authenticate with your GitHub account.
- The CLI links your current directory to a Vercel project (equivalent to
vercel link). If you are starting fresh, it enters an interactive flow equivalent tovercel init. - Run
vercel env pullto download environment variables into.env.local. This also covers Sandbox use cases that require OIDC tokens.
After setup completes, a .vercel/ directory is created in your repository root. Subsequent /deploy commands use this link. It is recommended to add .vercel/ to .gitignore.
Steps to Publish to Production with /deploy
Once setup is done, publishing to production is a single command. Writing "deploy my app to Vercel" in natural language produces the same result.
- Start
npm run devlocally and confirm it works on localhost (the minimum discipline to avoid discovering failures in production). git commityour changes to ensure a clean state (Vercel CLI works with uncommitted changes, but rollbacks become difficult).- Type
/deployin Claude Code. The plugin runs the equivalent ofvercel --prodand starts the build. - When complete, the production URL (
https://<project>.vercel.app) is returned to standard output.
If you have already linked GitHub and Vercel, pushing to the main branch also triggers automatic deployment. The plugin's /deploy shines in cases where you want to push to production immediately without creating a branch.
Real-Time Debugging with /vercel-logs
/vercel-logs transforms the experience of dealing with a failed deploy.
- Running it without arguments retrieves the build log from the most recent deploy.
- Adding
--followswitches to live streaming, with diffs flowing in as the build progresses. - Follow up by asking Claude to "suggest a fix for this error," and the loop of log analysis → fix → re-
/deploycompletes entirely within the chat.
If npm run build passes locally but fails on Vercel, the two most common causes are a Node version mismatch and missing environment variables. Check the Using Node.js xx.x line at the top of /vercel-logs output and the "Environment Variables" section first.
Safely Running the Claude Agent SDK on Vercel Sandbox
When you want Claude to handle code generation and shell execution without touching your production server or local machine, Vercel Sandbox is the answer. It lets you run Claude Code CLI in an isolated vCPU environment with explicit resource limits and timeouts.
import { Sandbox } from "@vercel/sandbox";
import ms from "ms";
const sandbox = await Sandbox.create({
resources: { vcpus: 4 },
timeout: ms("10m"),
});
await sandbox.runCommand({
cmd: "npm",
args: ["install", "-g", "@anthropic-ai/claude-code"],
});
After setup, import the Anthropic SDK and run file operations and shell commands using the standard Claude Agent SDK flow. The three safety guarantees — no access to production systems, prevention of unconstrained resource consumption, and no interference with other processes — are the reasons to choose Sandbox (Vercel KB: Using Vercel Sandbox to run Claude's Agent SDK).
Steps to Connect a Custom Domain to Vercel
Staying on *.vercel.app limits organic search growth, so it is worth learning the custom domain setup process too.
- Register a domain through a registrar such as Onamae.com, Google Domains, or Cloudflare Registrar (typically around 1,000–2,000 JPY per year).
- In the Vercel dashboard, go to the relevant project → Settings → Domains and add your domain.
- Register the DNS records (A record or CNAME) that Vercel instructs you to add in your domain registrar's control panel.
- Wait for propagation (a few minutes to a few hours). Run
dig <domain>— once it resolves to Vercel's IP, you are done.
The most common mistake is modifying settings before DNS has propagated and concluding that something is broken. Wait at least 30 minutes before touching anything.
Common Pitfalls: GitHub Permissions, DNS, and Environment Variables
In practice, most integration headaches come down to three areas:
- Insufficient permissions for GitHub private repositories: If you have not explicitly granted Vercel access to the target repository in the Vercel Integration settings, it will not appear in Vercel's repository list.
- DNS propagation time: It can feel like minutes but actually take tens of minutes. Setting TTL to 300 seconds or lower speeds up retry cycles.
- Separating Production / Preview / Development environment variables:
vercel env pullonly pulls one environment at a time, so forgetting to specify--environment=productionmeans production values will not end up in.env.local.
Keeping /vercel-logs --follow and the Vercel dashboard's "Environment Variables" tab open side by side lets you isolate almost any issue within five minutes.
Summary: Where Claude × Vercel Shines — and Where It Doesn't
The Claude Code + Vercel combination is at its best for "launching front-end-centric SaaS apps or personal blogs built with Next.js / Remix / SvelteKit as quickly as possible, then continuously iterating with Claude." Pair it with v0 via MCP and everything from UI generation to deploy completes within the chat.
Conversely, workloads centered on complex VPC configurations, long-running backends, or GPU computation do not fit well with Vercel's model. In those cases, a practical approach is to use Vercel Sandbox as a limited "Claude workspace" while hosting production on AWS or GCP. The /deploy and /vercel-logs combination is currently the lowest-friction option among all Claude × cloud deployment setups.