PortfolioIntroduction
"I made changes, but I'm scared to push directly to production"—that's a natural feeling. Using Vercel's preview feature, you can verify actual behavior before reflecting to production.
This article introduces the flow from preview environment verification to creating Pull Requests (PRs) and merging to production.
What is a Preview Environment?
On Vercel, pushing to any branch other than main automatically creates a preview (staging) environment.
| Branch | Environment | URL Example |
|---|---|---|
| main | Production | example.com |
| feature/new-page | Preview | xxx-feature-new-page.vercel.app |
| fix/typo | Preview | xxx-fix-typo.vercel.app |
Preview environments are published at URLs separate from production. You can verify actual display and behavior at these URLs.
Flow from Verification to Production
After changes in Claude Code, push to work branch
Verify display at URL auto-generated by Vercel
Additional pushes to branch also update preview
Create Pull Request on GitHub
Merge PR to main
Production environment automatically updates
How to Check Preview URL
From Vercel Dashboard
Log into the Vercel dashboard to see a list of deployments. Click the "Visit" button next to each deployment to open the preview URL.
From GitHub PR
When you create a PR, Vercel's bot comments with the preview URL. This is especially convenient when working in teams.
Ask Claude Code
Asking "what's the preview URL for the current branch?" sometimes gets an answer based on Vercel project settings.
Creating Pull Requests (PRs)
After confirming no issues in preview, create a PR.
What is a PR?
A Pull Request is a request saying "please incorporate changes from this branch into main." You can view a list of changes and exchange comments.
Creating PR with Claude Code
You can also instruct Claude Code to create PRs.
Create a Pull Request on GitHub.
Title is "Add about page"
Write a summary of changes in the description.
Claude Code uses gh command (GitHub CLI) to create the PR.
Creating PR on GitHub Website
You can also create from GitHub's website:
- Open repository page
- Select "Pull requests" tab
- Click "New pull request" button
- Select base branch (main) and compare branch
- Click "Create pull request" button
Executing Merge
If PR contents have no issues, execute the merge.
On GitHub Website
Simply click "Merge pull request" button on the PR page.
With Claude Code
Instructing "merge this PR" will have Claude Code handle it.
Post-Merge Behavior
Once merged to main branch, Vercel automatically starts deploying to production.
feature/new-page
Changes integrated
Deploy to Production
Typically, changes reflect on the production site within seconds to minutes.
Verification Checkpoints
When checking in preview environment, these points are worth verifying:
Display Verification
- No layout breakage
- Images displaying correctly
- No typos in text
Behavior Verification
- Links working correctly
- Forms can be submitted (test submission)
- Buttons and interactions work
Multi-Device Verification
- PC (desktop) display
- Smartphone display
- Tablet display (as needed)
When Issues Are Found
If you find issues in preview, fixing and pushing to the same branch automatically updates the preview environment.
Found this issue: ○○
Please fix and push
Repeat the cycle: fix → push → verify preview → merge if good.
Summary
- Preview environment allows verification before production
- PRs organize and manage change contents
- Auto-deploy after merge, no manual work needed
- Fix and push if issues found, preview auto-updates
Learning the "verify then merge" flow significantly reduces risk of breaking production. It might feel tedious at first, but once you're used to it, you won't want to give up this peace of mind.