Deploying to Vercel

Deploying by Connecting a Git Repository

The standard Vercel workflow is connecting a GitHub, GitLab, or Bitbucket repository through the Vercel dashboard; Vercel then automatically builds and deploys every push to your main branch to production, and every pull request to its own unique preview URL, with zero deployment configuration required for a typical Next.js project.

Vercel automatically detects Next.js projects and configures the build command (next build), output directory, and serverless/edge function routing for you — there's no vercel.json needed for standard setups.

# Alternative: deploy directly from the CLI
npm install -g vercel
vercel        # deploys the current directory
vercel --prod # deploys directly to production

Most teams use the Git integration for automatic deployments, reserving the CLI for quick one-off deploys or scripting.

What Vercel Does on Every Push

1. Detects Next.js automatically
2. Runs "next build"
3. Deploys static routes to a global CDN
4. Deploys dynamic routes as serverless/edge functions
5. Assigns a unique preview URL (for non-production branches)

• Every pull request gets its own preview deployment URL, useful for reviewing changes before merging.
• Merging to your production branch triggers an automatic production deployment.
• ISR revalidation is handled by Vercel's infrastructure automatically, with no extra configuration.
• Build and deployment logs are available directly in the Vercel dashboard for debugging failed deploys.

Vercel Deployment Cheat Sheet

Key concepts in the Vercel deployment workflow.

Using Preview Deployments Effectively

Preview deployments let reviewers (and stakeholders who aren't developers) see a fully working version of a pull request's changes before it's merged, which is especially valuable for visual or UX changes that are hard to evaluate from a diff alone.

Environment Variables per Environment

Vercel lets you configure different values for the same environment variable across Production, Preview, and Development environments — useful for pointing preview deployments at a staging database while production uses the real one.

Common Mistakes

• Committing real secrets to source control instead of using Vercel's environment variable settings.
• Not distinguishing between Production and Preview environment variable values, risking test data leaking into production or vice versa.
• Ignoring failed preview deployments, only checking build logs when production breaks.
• Manually configuring routing/build settings that Vercel would otherwise detect automatically.

Key Takeaways

• Vercel deploys automatically from Git, with production and preview deployments handled separately.
• Next.js projects require zero deployment configuration for standard setups.
• Environment variables can differ across Production, Preview, and Development environments.
• ISR revalidation and serverless/edge function routing are handled automatically by the platform.
• Preview deployments are valuable for reviewing changes before they reach production.