Deploy and launch · How to use a skill

deploy-nextjs-to-vercel

Deploys a Next.js app to Vercel with environment variables, a custom domain and preview deployments per branch. Use when the user wants to ship, host, publish or go live with a Next.js or React site on Vercel, or mentions vercel deploy, production URL or domains.

Version 1.1 · Updated 2026-10-31

View raw SKILL.md

Install in Claude Code, Cursor or Codex (optional)

Only for AI coding tools that read skill folders. Run one line in a terminal, in your project folder. It downloads this skill's text files from TheSkillVault and nothing else; you can read them first with “View raw SKILL.md”.

Claude Code (all your projects)

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/deploy-nextjs-to-vercel/raw' -o ~/'.claude/skills/deploy-nextjs-to-vercel/SKILL.md' && curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/deploy-nextjs-to-vercel/files/references/env-vars.md' -o ~/'.claude/skills/deploy-nextjs-to-vercel/references/env-vars.md'

Cursor (this project)

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/deploy-nextjs-to-vercel/raw' -o '.cursor/skills/deploy-nextjs-to-vercel/SKILL.md' && curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/deploy-nextjs-to-vercel/files/references/env-vars.md' -o '.cursor/skills/deploy-nextjs-to-vercel/references/env-vars.md'

Codex and other Agent Skills tools (this project)

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/deploy-nextjs-to-vercel/raw' -o '.agents/skills/deploy-nextjs-to-vercel/SKILL.md' && curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/deploy-nextjs-to-vercel/files/references/env-vars.md' -o '.agents/skills/deploy-nextjs-to-vercel/references/env-vars.md'

Or connect the whole library over MCP

Add TheSkillVault to Cursor or add this to your app's MCP settings (read-only; help):

{
  "mcpServers": {
    "theskillvault": {
      "url": "https://theskillvault.ai/mcp"
    }
  }
}

Deploy Next.js to Vercel

When to use

  • Shipping a Next.js app for the first time, or adding a domain or preview environment.

Steps

  1. Check npm run build passes locally; fix type and lint errors first.
  2. npm i -g vercel, then vercel link in the project root (or import the GitHub repo in the dashboard).
  3. Set env vars per environment: vercel env add NAME production (see env vars references/env-vars.md). Pull them locally with vercel env pull .env.local.
  4. vercel for a preview URL; vercel --prod for production. Confirm the production URL loads and API routes respond.
  5. Domain: Project > Settings > Domains, add your apex domain and its www subdomain, then set the DNS records Vercel shows (A/ALIAS for apex, CNAME for www).
  6. Connect the Git repo so every branch push gets a preview URL and main deploys to production.

Gotchas

  • Server env vars without NEXT_PUBLIC_ are not exposed to the browser; client code needs the prefix.
  • Changing an env var needs a redeploy to take effect.
  • Hobby plan is for personal, non-commercial use only. A business or commercial site (selling or advertising a product or service, taking payments, showing ads, or built by someone paid to make it) needs Pro: US$20 per month per developer seat, plus tax, as listed on vercel.com/pricing on 2026-10-31. Details: https://vercel.com/docs/limits/fair-use-guidelines

Example prompt

"Put this on Vercel with my domain."

Licence: CC BY 4.0. Attribution when you reuse it: From TheSkillVault, https://theskillvault.ai, CC BY 4.0