PProfessNet Academy
Vercel — deploying frontends/03core9 min

Preview deployments and the Pull Request workflow

Every change has its own address

A Preview deployment is a full, working deployment of your branch under a unique URL — before anything reaches production. This is one of Vercel's strongest features: the reviewer clicks the link and sees the working change, not just the diff.

How it works with a PR

  1. You create a branch and push it to GitHub.
  2. You open a Pull Request to main.
  3. Vercel automatically builds a Preview and adds a comment in the PR with the link.
  4. Each new commit in the PR generates a fresh preview under the same entry.
  5. After merging into main, Vercel builds Production.
git switch -c feature/raporty-mfa
# ...changes...
git push -u origin feature/raporty-mfa
# Open the PR -> Vercel links the preview in a comment by itself

What a preview gives code review

BenefitWhy it matters
Visual verificationThe reviewer sees the UI, not just the code
Manual testingYou click the feature live before merge
Demo for the product ownerSign-off on the change before production
IsolationThe preview does not touch production data (with a separate env)

Tip: Paste the preview link into the PR thread and describe what specifically is worth clicking through ("check the MFA widget on the dashboard"). This shortens review time and raises its quality.

Environment variables and the preview

Vercel lets you assign variables separately per environment: Production, Preview, Development. This way a preview can point to a test backend, not a production one.

NEXT_PUBLIC_API_URL  (Production) = https://api.zeus.example.com
NEXT_PUBLIC_API_URL  (Preview)    = https://api-staging.zeus.example.com

Comments and the Vercel Toolbar

On the preview a Vercel Toolbar bar appears, letting you leave comments directly on a page element. The notes go back to the PR — the reviewer can point out "this button is too small" by clicking it, without writing a separate comment in the code.

The ProfessNet workflow in brief

  1. A feature/... branch → push.
  2. PR to main → Vercel builds a preview.
  3. CI (GitHub Actions) runs the tests and lint.
  4. The reviewer reviews the code and clicks the preview.
  5. Green CI + approve → merge.
  6. Vercel deploys production from main.

Summary

Preview deployments turn review into a visual experience: every PR has a working URL with a separate environment. This connects Git, GitHub Actions, and Vercel into one smooth flow — the reviewer evaluates the change before touching production.