Deploy your first Next.js site, add a custom domain, and use preview deployments.
⬡ What you'll build
Vercel solves a specific problem: deploying web applications was hard. You needed to manage servers, configure nginx, handle SSL certificates, set up CDNs, and monitor everything manually. Vercel removes all of that.
You push code to GitHub. Vercel builds it and serves it from a global network. That's the entire product.
Vercel is a deployment platform. When you connect your GitHub repository to Vercel:
npm run build (or whatever build command your project uses)git pushNo servers to manage. No SSL configuration. No CDN setup. It's automatic.
| Task | Traditional Hosting | Vercel |
|---|---|---|
| Deploy code | Manual FTP or SSH | Automatic on git push |
| SSL certificate | Manual setup, manual renewal | Automatic, auto-renews |
| CDN | Pay extra, complex config | Included, automatic |
| Environment variables | SSH into server, edit files | Dashboard UI |
| Preview environments | Manual | Automatic per branch |
| Rollback | Manual, risky | One click to any previous deploy |
For a one-person business, the productivity difference is significant. You focus on building, not on operations.
Vercel is not a general-purpose server. It's specifically built for frontend frameworks and serverless functions.
Vercel doesn't handle:
If you're building with Next.js, Vercel is the right choice. If you're building with WordPress, Vercel is the wrong tool — use Hostinger instead.
For Next.js, Vercel auto-detects everything:
next build (default).next (default)npm install (default)You don't need to change any of these unless your project has unusual configuration.
If your project uses environment variables (API keys, database URLs, etc.):
Common variables for an AI business project:
NEXT_PUBLIC_SITE_URL — your domain (e.g., https://yourdomain.com)NEXT_PUBLIC_GA_ID — Google Analytics 4 measurement IDNEXT_PUBLIC_PLAUSIBLE_DOMAIN — Plausible analytics domainClick Deploy. Vercel builds your project. In 1–3 minutes, it's live at a *.vercel.app URL.
Your site starts at your-project-name.vercel.app. You want it at yourdomain.com.
yourdomain.com) and click AddYou'll see one of two options:
Option A — Use Vercel nameservers (recommended for simplicity):
Vercel gives you nameservers (e.g., ns1.vercel-dns.com, ns2.vercel-dns.com). In your domain registrar, change the nameservers to these. Vercel manages DNS entirely.
Option B — Add CNAME record (if you manage DNS yourself):
Add a CNAME record: www → cname.vercel-dns.com
For the root domain (@): add an A record pointing to 76.76.21.21
After you update DNS records, it takes 15 minutes to 48 hours for the change to propagate worldwide. During this time:
When propagation is complete, Vercel automatically provisions an SSL certificate. Your site will be accessible at https://yourdomain.com.
Test from a different network (mobile data instead of WiFi) or use a tool like whatsmydns.net to see propagation status across different global regions.
Every branch in your GitHub repository gets its own deployment URL when you push to it.
Example workflow:
git checkout -b new-homepageyour-project-new-homepage.vercel.appmainThis means you can test changes before they go live on your main domain. For a content site, this is useful for design changes. For an app, it's essential.
When you add environment variables, you choose which environments they apply to:
main branch deploymentvercel env pullFor most simple setups: set all variables to "All Environments" unless you have a specific reason not to. This ensures preview deployments behave the same as production.
When a deployment fails or a serverless function throws an error, you need logs.
Build logs: Vercel → Project → Deployments → Click on a deployment → Build logs This shows you what happened during the build. TypeScript errors, missing packages, and configuration problems appear here.
Function logs: Vercel → Project → Logs (tab at the top) This shows runtime logs from serverless functions. If your API routes throw errors, they appear here.
Runtime errors in production are silent without logs. Check the Logs tab if users report something broken that you can't reproduce locally.
If a deployment breaks something:
Your site immediately goes back to the previous version. Zero downtime. This is one of the main reasons to use Vercel over manual hosting.
Check these monthly in the Vercel dashboard:
| Metric | Hobby Limit | What Triggers It |
|---|---|---|
| Bandwidth | 100 GB | High traffic, large pages |
| Serverless function invocations | 100K/month | API routes, server-side rendering |
| Build minutes | 6,000 min/month | Frequent deployments on large projects |
| Edge requests | 1M/month | Cached page requests |
For a new site: you will not hit any of these limits. A site with 10,000 monthly visitors uses roughly 1–5GB bandwidth and well under 100K function invocations.
Monitor the Usage section in your Vercel dashboard. You'll see it coming before you hit any limit.
ℹVercel vs Netlify
Netlify is Vercel's main competitor with a similar free tier. Both work well for Next.js. Vercel is built by the creators of Next.js — edge cases and new Next.js features work on Vercel first. For this reason, Vercel is the default recommendation for Next.js projects. If you're using a different framework (Astro, SvelteKit, Remix), Netlify is equally viable.
⚠Don't put secrets in code
Environment variables exist specifically to keep secrets out of your codebase. Never put API keys, database passwords, or access tokens directly in your JavaScript/TypeScript files. Always use environment variables. If you accidentally commit a secret to GitHub, treat it as compromised and rotate it immediately.
Once everything is set up, your deployment workflow is:
1. Make changes to files on your computer
2. Test locally with: npm run dev (or next dev)
3. When satisfied: git add . && git commit -m "describe changes" && git push
4. Vercel builds automatically (1–3 min)
5. Check the production URL — changes are live
Total active time: under 2 minutes. The build happens in the background while you do something else.
Implementation Checkpoint