Claude × Vercel Deploy | Publish Next.js with /deploy

AI-powered article summarypowered by Claude

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.

結論powered by Claude

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

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:

  1. Production deploy via /deploy: Using the official Vercel plugin, you can publish your current project in a single command, similar to running vercel --prod.
  2. Log retrieval via /vercel-logs: Add --follow to switch to live streaming, then have Claude interpret build failures on the spot and automate retries.
  3. 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 /deploy will 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.

  1. Run /vercel-setup inside a Claude Code session.
  2. On first run, a Vercel login page opens in your browser — authenticate with your GitHub account.
  3. 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 to vercel init.
  4. Run vercel env pull to 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.

  1. Start npm run dev locally and confirm it works on localhost (the minimum discipline to avoid discovering failures in production).
  2. git commit your changes to ensure a clean state (Vercel CLI works with uncommitted changes, but rollbacks become difficult).
  3. Type /deploy in Claude Code. The plugin runs the equivalent of vercel --prod and starts the build.
  4. 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 --follow switches 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-/deploy completes 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.

  1. Register a domain through a registrar such as Onamae.com, Google Domains, or Cloudflare Registrar (typically around 1,000–2,000 JPY per year).
  2. In the Vercel dashboard, go to the relevant project → Settings → Domains and add your domain.
  3. Register the DNS records (A record or CNAME) that Vercel instructs you to add in your domain registrar's control panel.
  4. 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 pull only pulls one environment at a time, so forgetting to specify --environment=production means 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.

参考になったら ♡
Clauder Navi 編集部
@clauder_navi

Anthropic の Claude / Claude Code を中心に、日本のエンジニア向けに最新動向と実務 を毎日発信。 運営方針 は メディアについて をご覧ください。