Deploy to Vercel: Domains, Env Vars, Previews

Rocket deploying from laptop straight to cloud

Vercel is the hosting platform run by the company behind Next.js. Naturally, it has the tightest integration with Next.js, but it also supports React, Vue, Svelte, and other frameworks. The core pitch: push to git, and everything from build to deployment happens automatically.

Compare that to self-hosting on AWS — EC2 setup, Nginx config, SSL certificates, CI/CD pipelines... a lot of moving parts. Vercel abstracts all of that away so you can focus on code.

Getting Started

Connecting a Git Repository

Sign up at vercel.com (logging in with GitHub is easiest)
Click "New Project"
Select your GitHub repository
Framework auto-detected — click "Deploy"

That's it. For Next.js projects, it auto-detects the build command (npm run build) and output directory.

Once deployed, you get a URL like your-project.vercel.app. HTTPS is automatic. You could run a service on this URL alone, but most people connect a custom domain.

Deploying via CLI

If you prefer the terminal over the web dashboard:

npm i -g vercel
vercel login
vercel         # run from project root

Running vercel walks you through project setup and deploys immediately. Add vercel --prod for a production deployment. Handy for quick checks without setting up CI/CD.

Custom Domain Setup

DNS Configuration

In the Vercel dashboard: Settings → Domains → enter your domain. Vercel tells you which DNS records to add.

Two common approaches:

A Record — for the root domain (example.com):

A    @    76.76.21.21

CNAME Record — for subdomains (www.example.com):

CNAME    www    cname.vercel-dns.com

If you purchased your domain through Vercel, DNS is configured automatically. For domains from external registrars, add the records in your registrar's DNS management panel.

SSL Certificates

Connecting a custom domain triggers automatic Let's Encrypt SSL certificate provisioning. Renewal is automatic too. HTTP → HTTPS redirect is enabled by default. Zero manual certificate management.

www Redirect

Register both www.example.com and example.com, and Vercel redirects one to the other. This is good for SEO — maintaining a single canonical URL. Choose which one is primary in the dashboard.

Environment Variables

Sensitive values like API keys and database URLs shouldn't live in code. Manage them in Vercel's environment variable settings.

Under Settings → Environment Variables, add key-value pairs. They're accessible via process.env.VARIABLE_NAME at build time and runtime.

The important part — you can set different values per environment:

Production — used when deploying from the main branch
Preview — used for PR and branch deployments
Development — used with vercel dev locally

This lets you separate production and development databases, or enable debug mode only in staging.

# .env.local (local development — don't commit to git)
DATABASE_URL=postgresql://localhost:5432/mydb_dev
API_KEY=dev_key_123

# Set in Vercel dashboard for Production environment:
# DATABASE_URL=postgresql://prod-server:5432/mydb_prod
# API_KEY=prod_key_456

One gotcha with Next.js — environment variables need the NEXT_PUBLIC_ prefix to be accessible on the client side. Variables without this prefix are server-only. Adding NEXT_PUBLIC_ to an API key accidentally exposes it to the browser, so be careful.

Preview Deployments

One of Vercel's most useful features. Open a PR, and that branch automatically deploys with a unique URL. The preview URL appears as a comment on the PR.

During code review, reviewers don't need to pull the branch and build locally — they can check the deployed version directly. Send the link to designers or PMs: "Check it here." Communication overhead drops significantly.

Preview deployments use Preview environment variables, so you can test without touching production data.

Build Configuration

Defaults work for most projects, but when you need to adjust:

Custom build command — for monorepos or custom build scripts:

Build Command: cd packages/web && npm run build
Output Directory: packages/web/.next

Ignored Build Step — skip builds under certain conditions. Useful in monorepos to avoid rebuilding when unrelated packages change:

# Skip build if no changes in the web package
git diff HEAD^ HEAD --quiet -- packages/web/

Node.js version — set via engines in package.json or in the dashboard. Match your local version to avoid surprises.

Vercel Functions (Serverless)

Next.js API Routes (app/api/) and Server Actions automatically deploy as serverless functions on Vercel. No extra config — a request to /api/hello runs a serverless function.

With Fluid Compute (enabled by default), serverless function timeout is up to 300 seconds on Hobby and up to 800 seconds on Pro. Check Vercel docs for current limits.

Edge Functions are also supported — they run on edge servers closer to users for faster response times. However, only a subset of Node.js APIs is available (no fs module, for example).

Pricing

Hobby (Free) — for personal projects. Includes generous build and bandwidth limits. Plenty for a personal blog or portfolio. Check vercel.com/pricing for current quotas.

Pro ($20/month) — for teams. Much higher limits on builds, bandwidth, and function execution. Adds team management, password protection, and analytics.

Watch out for traffic spikes — they can trigger overage charges. Set a Spend Limit in the Vercel dashboard to cap unexpected costs. Skipping this and going viral can lead to a painful bill.

Alternatives to Vercel

Vercel isn't the right answer for every situation.

Cloudflare Pages — More generous free tier than Vercel. 500 builds/month, unlimited bandwidth. Next.js support is improving but not quite at Vercel's level yet.

Netlify — Similar positioning to Vercel. Stronger with static sites, Astro, and Gatsby than with Next.js.

Railway/Render — Better for full-stack apps where you want DB + backend + frontend in one place. Vercel is frontend-focused — if you need a database or long-running server, you'll combine it with other services.

If you're using Next.js, Vercel is the path of least resistance. The framework maker running the hosting platform means tight optimization. Start with the free tier and evaluate options as your traffic grows.