vercel

name	vercel
title	Vercel
category	Hosting & Deploy
description	Use to deploy frontend/full-stack apps (Next.js, Vite, etc.) with Git or the CLI, manage env vars, and control preview vs production deploys.
tags	["hosting","deploy","nextjs","serverless","edge","cli"]
official_docs	https://vercel.com/docs
sources	["https://vercel.com/docs/cli/deploy","https://vercel.com/docs/deployments/overview"]
last_verified	2026-08-10T00:00:00.000Z

Vercel — Skillship

The fastest way to ship frontend and full-stack apps. Connect a Git repo for push-to-deploy with automatic preview URLs, or deploy straight from the CLI.

🧭 When to use this skill

• Use when: deploying Next.js, Vite, Astro, SvelteKit, or static sites.
• Use when: you want a preview URL per pull request and instant rollbacks.
• Don't use for: always-on stateful servers or long-running background workers (use Railway/Render/Fly).

⚡ Quickstart

Option A — Git (recommended)

1. Push your repo to GitHub/GitLab/Bitbucket.
2. Import it at vercel.com → every push to a branch gets a preview; the production branch gets production.

Option B — CLI

npm i -g vercel
vercel            # first run links/creates the project (first deploy is always production)
vercel            # subsequent runs create PREVIEW deployments
vercel --prod     # promote to production

Configure env vars

vercel env add MY_SECRET production      # add a secret to the production environment
vercel env pull .env.local               # pull env vars locally for dev
# NEXT_PUBLIC_* vars are exposed to the browser; everything else stays server-side

🧩 Common recipes

Recipe: Deploy from CI and capture the URL

url=$(vercel deploy --prod --token "$VERCEL_TOKEN")   # stdout is always the deployment URL
echo "Deployed to $url"

Recipe: Prebuild then deploy (skip remote build)

vercel build
vercel deploy --prebuilt --archive=tgz   # archive avoids file-count limits on big projects

Recipe: Choose function regions

vercel --regions sfo1

Recipe: Minimal vercel.json

{
  "rewrites": [{ "source": "/api/:path*", "destination": "/api/:path*" }],
  "headers": [{ "source": "/(.*)", "headers": [{ "key": "X-Frame-Options", "value": "DENY" }] }]
}

🚀 Ship to production

• All secrets set in Project → Settings → Environment Variables (Production scope), not committed.
• Only NEXT_PUBLIC_* (or framework equivalent) vars are exposed client-side.
• Production branch configured; preview deploys used for PR review.
• Custom domain added and DNS verified; --prod promotes the intended build.
• Build works without --prebuilt (system env vars are missing at build time with --prebuilt).
• Know your plan's function timeout/size limits; move heavy/long jobs off Vercel functions.

🔐 Security & secrets

• Store secrets as Environment Variables scoped to the right environment; never hardcode in the repo.
• CLI/CI tokens (VERCEL_TOKEN) are account-wide — keep them in CI secret storage, rotate if leaked.
• Server-only secrets must NOT use the NEXT_PUBLIC_ prefix, or they leak into the client bundle.

🐛 Common errors & fixes

Symptom	Likely cause	Fix
Env var undefined in the browser	Missing NEXT_PUBLIC_ prefix	Prefix client-exposed vars; re-deploy
Env var undefined at build with --prebuilt	System/build env vars absent in prebuilt flow	Use Git deploys or omit --prebuilt
Too many files / upload limit	Huge project	vercel deploy --archive=tgz
Function timeout	Long-running work in a serverless function	Offload to a queue/worker or a different host
First deploy went to production unexpectedly	First deploy of a new project is always production	Use previews for later changes; --prod to promote

📚 Sources

• https://vercel.com/docs/cli/deploy
• https://vercel.com/docs/deployments/overview