TemperStack
Find Tools
Intermediate8 min readUpdated Mar 13, 2026

How to set up preview deployments on Vercel

Quick Answer

Preview deployments on Vercel automatically trigger for non-production branches and pull requests when connected to Git, generating unique URLs for testing. Production deploys only on the main branch while other branches/PRs go to Preview environment. Setup takes 10-20 minutes via dashboard with optional environment variables for Preview scope.

Prerequisites

  1. GitHub, GitLab, or Bitbucket repository with your project code
  2. Vercel account (free tier works)
  3. Project code pushed to repository
  4. Optional: Vercel CLI installed via <code>npm install -g vercel</code>
  5. Basic Git workflow familiarity
1

Create New Project and Import Git Repository

Log in to vercel.com and click New Project in the dashboard. Select Import Git Repository, authorize Vercel to access your Git provider (e.g., GitHub), and choose your repository. Vercel auto-detects the framework preset like Next.js or Create React App. Confirm Project Name (auto-generated), leave Root Directory as ./, use defaults for Build & Output Settings (e.g., npm run build), then click Deploy for initial production URL on default branch.
2

Verify Git Integration and Preview Settings

In the Vercel dashboard, select your project and go to Settings > Git. Confirm Production Branch is main (or master)—pushes here trigger Production deploys. Set Preview Branch Limit (default: 200 concurrent previews). Add branches to Ignore Builds if needed (e.g., docs). Verify or override Framework Preset. Save changes to activate previews for non-production branches/PRs.
Tip
Previews auto-generate unique URLs for branches/PRs by default.
3

Configure Preview Environment Variables

Go to Settings > Environment Variables and add variables scoped to Preview environment. Example: NEXT_PUBLIC_API_URL = https://staging-api.example.com. Vercel auto-injects VERCEL_ENV=preview and VERCEL_URL=<unique-preview>.vercel.app. Use in code like: 
const apiUrl = process.env.VERCEL_ENV === 'preview' 
  ? process.env.NEXT_PUBLIC_API_URL 
  : 'https://api.example.com';
Click Add and Save.
Tip
Scope vars correctly to avoid 'Missing DATABASE_URL in preview' errors.
4

Install Vercel CLI (Optional for Local Testing)

Install globally with npm install -g vercel for local preview deploys, env pulling, and logs. Useful commands: vercel for preview, vercel --prod for production, vercel env add for scoped variables, vercel logs [deployment-url] for troubleshooting.
Tip
CLI helps replicate Preview env locally.
5

Test Preview Deployment via Git Branch

Create feature branch: git checkout -b feature/test-preview. Make changes, commit, and push: git add . && git commit -m "Test preview" && git push origin feature/test-preview. Open PR to main in Git provider. Vercel auto-triggers Preview build—check Deployments tab for status.
6

Access and Share Preview URL

When Ready, get unique URL like https://project-feature-test-preview-abcd1234.vercel.app. View logs, inspect build. Use Share button for team access or copy URL. Team members with project access can comment and view live preview.
Tip
Vercel posts preview URL in PR comments automatically.
7

Customize with vercel.json (Optional)

Add vercel.json in project root for custom build commands, output directories, or redirects. Example for static sites: 
{
  "buildCommand": "npm run build",
  "outputDirectory": "dist"
}
Vercel uses this if framework preset fails detection.
Tip
Overrides dashboard settings for advanced configs.
8

Manage Deployments in Dashboard

From Deployments sidebar: Redeploy specific commits, Inspect logs, assign custom domains, or Promote to Production. Monitor Preview vs Production environments.

Troubleshooting

No preview deployment triggers
Ensure repo imported via Dashboard > New Project > Import Git. Push to non-main branch or open PR. Verify Git webhook in Settings > Git > Enable deployments.
Environment variables missing in preview
Scope vars to Preview in Settings > Environment Variables. Use vercel env add <var> preview via CLI. Check VERCEL_ENV in code.
Build failures on preview
Inspect logs in Deployments tab. Verify framework preset, build command, or add vercel.json. Ignore problematic branches in Git settings.
Preview limit exceeded
Increase Preview Branch Limit in Settings > Git (default 200). Older previews auto-expire.
No PR comment with preview URL
Confirm Git integration and webhook. Check Deployments tab manually or ensure Git provider permissions.

Related Guides

More Vercel Tutorials

How to deploy Next.js app

How to deploy Astro site

How to set up custom domain

How to configure environment variables

Other Tool Tutorials

N

Netlify Tutorials

Ready to get started with Vercel?

Put this tutorial into practice. Visit Vercel and follow the steps above.

Visit Vercel →