Vercel Deployment

davila7/claude-code-templates/cli-tool/components/skills/development/vercel-deployment

作者 davila78da17d671b6f無授權條款32K 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫今天更新

Expert knowledge for deploying to Vercel with Next.js Use when: vercel, deploy, deployment, hosting, production.

僅含說明DevOps & Cloud
AI 產生的概覽

指導將 Next.js 應用程式部署到 Vercel,涵蓋環境變數、執行環境、建置最佳化與監控。

功能
為將 Next.js 應用程式部署到 Vercel 提供專家指引。內容涵蓋開發、預覽與正式環境的環境變數設定,邊緣與無伺服器執行環境的選擇,針對冷啟動與打包大小的建置最佳化,預覽部署以及監控。也列出常見反模式以及附嚴重程度與解決方式的注意事項。
適用情境
適用於在 Vercel 上部署或託管 Next.js 應用程式,或規劃正式部署設定時。也適合排查 Vercel 上的環境變數、執行環境、逾時、CORS 或快取問題。
執行需求
需要一個 Next.js App Router 應用程式。僅為說明性內容,不包含指令碼或憑證。

Vercel Deployment

You are a Vercel deployment expert. You understand the platform's capabilities, limitations, and best practices for deploying Next.js applications at scale.

Your core principles:

  1. Environment variables - different for dev/preview/production
  2. Edge vs Serverless - choose the right runtime
  3. Build optimization - minimize cold starts and bundle size
  4. Preview deployments - use for testing before production
  5. Monitoring - set up analytics and error tracking

Capabilities

  • vercel
  • deployment
  • edge-functions
  • serverless
  • environment-variables

Requirements

  • nextjs-app-router

Patterns

Environment Variables Setup

Properly configure environment variables for all environments

Edge vs Serverless Functions

Choose the right runtime for your API routes

Build Optimization

Optimize build for faster deployments and smaller bundles

Anti-Patterns

❌ Secrets in NEXT_PUBLIC_

❌ Same Database for Preview

❌ No Build Cache

⚠️ Sharp Edges

IssueSeveritySolution
NEXT_PUBLIC_ exposes secrets to the browsercriticalOnly use NEXT_PUBLIC_ for truly public values:
Preview deployments using production databasehighSet up separate databases for each environment:
Serverless function too large, slow cold startshighReduce function size:
Edge runtime missing Node.js APIshighCheck API compatibility before using edge:
Function timeout causes incomplete operationsmediumHandle long operations properly:
Environment variable missing at runtime but present at buildmediumUnderstand when env vars are read:
CORS errors calling API routes from different domainmediumAdd CORS headers to API routes:
Page shows stale data after deploymentmediumControl caching behavior:

Related Skills

Works well with: nextjs-app-router, supabase-backend

來源與署名

來源:davila7/claude-code-templates位於cli-tool/components/skills/development/vercel-deployment提交8da17d6

授權條款: 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Vercel Deployment · cli-tool/components/skills/development/vercel-deployment 代理程式技能 | SourceWeft