Separate Preview and Production

Vercel gives every project three environments: Development, Preview, and Production. Development is your laptop. The other two live on Vercel, and every deployment belongs to one of them.

The rule is simple. A push to the production branch, usually main, creates a Production deployment. A push to any other branch, or a pull request, creates a Preview deployment. Both get their own URL. Only a successful Production deployment moves the production domain.

Let’s see it happen. Create a branch, change something visible, and push:

git checkout -b footer-year
# edit app/layout.tsx and add the current year to the footer
git commit -am 'Add year to footer'
git push -u origin footer-year

Within a minute the dashboard shows a new deployment tagged Preview. Its URL looks like field-notes-git-footer-year-flavio.vercel.app. Open it and you see the new footer. Open field-notes.vercel.app and the old footer is still there. Nothing reached your users.

A Preview is a real app

This is the part I want to stress. A Preview deployment isn’t a screenshot. It’s your code, running, with network access.

If that branch sends email, it sends real email. If it writes to a database, it writes. If it calls a paid API, you pay. And it exposes half-finished routes to anyone with the URL.

So Preview needs its own credentials and its own throwaway data. We’ll scope environment variables per environment in a later lesson. For now, remember the goal: a preview must never be able to touch the production database by accident.

Two kinds of URL

Each Preview deployment has two addresses. The branch URL always points at the latest deployment for that branch. The unique URL, like field-notes-9k2m1x7de-flavio.vercel.app, points at one exact build.

Before you review anything, check the commit shown on the deployment page. Someone may have pushed again while you were opening the link.

One more warning. A green Preview does not guarantee Production behaves the same. Domains differ, secrets differ, data differs, and plan limits can differ. Preview tells you the code works. Production still gets its own smoke test.

Try this on your own project: create a branch with a visible footer change, push it, and compare the preview URL with the production URL side by side. Then look up which commit each one is serving.