Blog Deploy a Next.js site to Vercel from GitHub
Deploy a Next.js site to Vercel from GitHub
TL;DR Import your GitHub repo into Vercel once. After that, every push to main ships to production and every pull request gets its own preview URL. Add your domain, set your environment variables, and you have continuous deployment with almost no config.
Vercel and Next.js are built by the same team, so deploying one on the other is about as smooth as it gets. Once it is wired up, you mostly forget it exists: you push code, the site updates. Here is how I set it up.
Connect the repo once
Sign in to Vercel with your GitHub account, click to import a project, and pick your repository. Vercel recognizes a Next.js app and fills in the build command and output directory for you. Confirm, and the first deployment starts.
That is the only manual step. From here it is automatic.
What you get after that
- Production on push. Every push to your production branch, usually
main, builds and goes live at your domain. - A preview for every pull request. Open a PR and Vercel builds that branch at its own URL. You review the actual running site, not a guess, then merge with confidence.
- Instant rollback. If a deploy goes wrong, you can promote a previous one back to production in a click.
Add your domain
In the project, open the Domains section and add your custom domain. Vercel gives you the DNS records to set, issues the certificate, and handles renewals. Point www at the app and set an apex redirect so both spellings resolve to one canonical address.
Handle environment variables
Anything secret, an API key, a form endpoint token, goes in Project Settings under Environment Variables, not in your code. Set them per environment if you need different values for preview and production. Vercel injects them at build and runtime, so nothing sensitive lands in the repo.
A trick worth knowing: deploy hooks
Sometimes you want a fresh build without a code change. A scheduled rebuild, or content that should publish on a certain day. Create a Deploy Hook under Git settings and you get a URL. POST to it from a cron job or a scheduled GitHub Action, and Vercel builds production on demand. I use exactly this to publish dated content on a schedule.
Keep the build honest
A green deploy is only as good as your build. Run the production build locally before you push anything you are unsure about, so a type error or a missing dependency fails on your machine instead of in front of a preview reviewer. Continuous deployment rewards a clean build and punishes a sloppy one, which is a good habit either way.
That is the whole setup. Connect once, push to ship, and let preview URLs carry the review. It stays out of your way, which is the highest compliment you can pay a deploy pipeline.
FAQ
Do I need a vercel.json file?
Usually not. Vercel detects Next.js and applies sensible build settings on its own. You add a vercel.json only for specific needs like custom rewrites or headers that you are not already handling in next.config. For most sites, skip it.
What is a preview deployment?
Every branch and pull request gets its own live URL built from that code. You can click through the real site before merging, and share the link for review. Merging to your production branch is what promotes a build to the live domain.
How do I trigger a deploy without pushing code?
Create a Deploy Hook in Project Settings under Git. It gives you a URL that, when you POST to it, starts a fresh production build. That is handy for scheduled rebuilds or publishing content on a timer.