How to Deploy a Next.js App to Vercel With a Custom Domain
Vercel is the company behind Next.js and the platform tuned for it. Push a repo and you get a production deploy, a preview URL per branch, and edge caching without writing config.
Why Deploy Next.js on Vercel?
Because Vercel builds the framework, it understands Next.js features natively — server components, route handlers, image optimization, and incremental static regeneration all work with zero config. Other hosts can run Next.js, but you often maintain the plumbing yourself.
How to Deploy Your Next.js App
- Sign up at vercel.com with GitHub or GitLab.
- Click Add New → Project and import your repo.
- Vercel auto-detects Next.js and fills in the build command.
- Add environment variables in the Project Settings if your app needs them.
- Click Deploy. Builds finish in under two minutes for typical apps.
Every subsequent push to main redeploys production; every pull request gets its own preview URL.
How Do You Attach a Custom Domain?
Open Project Settings → Domains, add your domain, and either switch nameservers to Vercel or add the recommended A and CNAME records. SSL is issued automatically and renews without action. Apex and www can both point at the project, with one redirecting to the other.
Is Vercel Free?
The Hobby plan is free for personal, non-commercial projects and includes 100 GB of fast data transfer per month. Commercial use technically requires the Pro plan at $20 per member per month, which also raises limits and adds team features.
| Plan | Bandwidth | Use |
|---|---|---|
| Hobby | 100 GB/mo | Personal projects |
| Pro | 1 TB/mo (~$20/user) | Commercial apps |
What Surprises People?
Vercel’s serverless functions are stateless and have execution time limits, so long tasks fail. Bandwidth on the Hobby plan is measured on fast data transfer and can be exceeded by image-heavy sites. And if your database is far from the function region, every query pays a latency tax — pick regions deliberately.
Is Vercel the Right Host?
Yes for Next.js, React, and static front-ends with light API routes. If you’re running Python, containers, or long-lived servers, another platform fits better. Vercel optimizes for front-end velocity, not general-purpose compute.
Quick Summary
- Vercel deploys Next.js from Git with automatic detection and previews.
- Custom domains get automatic SSL; point DNS at Vercel or use their records.
- Hobby is free (100 GB/mo) but limited to non-commercial use.
- Functions are stateless with short time limits.
- Best for Next.js/front-end; choose differently for containers or long-lived servers.
