Vercel Deployment

by davila78da17d671b6fNo license32K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated today

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

AI-generated overview

Guides deployment of Next.js applications to Vercel, covering environment variables, runtimes, build optimization and monitoring.

What it does: Provides expert guidance for deploying Next.js applications to Vercel. It covers environment variable configuration across dev, preview and production, choosing between edge and serverless runtimes, build optimization for cold starts and bundle size, preview deployments, and monitoring. It also lists common anti-patterns and sharp edges with severity and solutions.
When to use it: Use when deploying or hosting a Next.js application on Vercel, or when planning production deployment configuration. Also useful for troubleshooting environment variable, runtime, timeout, CORS or caching issues on Vercel.
Requirements: Requires a Next.js App Router application. Instructions only; no scripts or credentials are included.

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:

Environment variables - different for dev/preview/production
Edge vs Serverless - choose the right runtime
Build optimization - minimize cold starts and bundle size
Preview deployments - use for testing before production
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

Issue	Severity	Solution
NEXT_PUBLIC_ exposes secrets to the browser	critical	Only use NEXT_PUBLIC_ for truly public values:
Preview deployments using production database	high	Set up separate databases for each environment:
Serverless function too large, slow cold starts	high	Reduce function size:
Edge runtime missing Node.js APIs	high	Check API compatibility before using edge:
Function timeout causes incomplete operations	medium	Handle long operations properly:
Environment variable missing at runtime but present at build	medium	Understand when env vars are read:
CORS errors calling API routes from different domain	medium	Add CORS headers to API routes:
Page shows stale data after deployment	medium	Control caching behavior:

Related Skills

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

Source and attribution

Source:davila7/claude-code-templatesincli-tool/components/skills/development/vercel-deploymentat commit8da17d6

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Vercel Deployment

Vercel Deployment

Capabilities

Requirements

Patterns

Environment Variables Setup

Edge vs Serverless Functions

Build Optimization

Anti-Patterns

❌ Secrets in NEXT_PUBLIC_

❌ Same Database for Preview

❌ No Build Cache

⚠️ Sharp Edges

Related Skills

Source and attribution

More from davila7/claude-code-templates

React Best Practices

Web Performance Optimization

Find Bugs

Browser Automation

Code Review

Commit

More in DevOps & Cloud

Playwright Devops

M5 Onboard

Yeet

Runbook

Incident Response

Deploy Checklist