Style & Ship›Extra· 30 min read

Deploying on Vercel

Ship your Next.js app to the internet in minutes by connecting your GitHub repo to Vercel.

What you will learn

Push your app to GitHub
Deploy it on Vercel
Understand automatic deploys

From your laptop to a live URL

Next.js is made by Vercel, so deploying there is the smoothest path. The usual flow is: push your code to GitHub, connect the repo to Vercel, and it builds and hosts your site automatically.

The steps

Put your project on GitHub (create a repo and push your code).
Sign in to vercel.com and click Import Project.
Pick your repo. Vercel detects Next.js and fills in the settings.
Click Deploy and wait for the build to finish.

Terminal: push your project to GitHub before importing it on Vercel

# in your project folder, push to GitHub first
git init
git add .
git commit -m "My Next.js app"
git branch -M main
git remote add origin https://github.com/you/my-app.git
git push -u origin main

Note: Output (Vercel after the build): Building... Compiled successfully Deployment ready https://my-app.vercel.app Your app is live at a public URL. Share that link and anyone can visit your site.

Automatic deploys

The best part: once connected, every push to GitHub triggers a new deploy automatically. Pull requests even get their own preview URL, so you can check changes before they go live.

You do	Vercel does
Push to `main`	Builds and updates the live site
Open a pull request	Builds a separate preview URL
Add an environment variable	Keeps your secrets safe on the server

Tip: Keep secrets (API keys, database URLs) out of your code. Add them as Environment Variables in the Vercel dashboard, and read them with process.env.MY_KEY on the server.

Watch out: Make sure your app builds locally first. Run npm run build on your machine and fix any errors before deploying — Vercel runs the same build and will stop if it fails.

Q. After connecting your GitHub repo to Vercel, what happens when you push new code to main?

Answer: Once linked, Vercel auto-deploys on every push. Pushes to main update production; pull requests get their own preview URLs.

✍️ Practice

Run npm run build locally and make sure it finishes with no errors.
Push a small Next.js app to GitHub and deploy it on Vercel.

🏠 Homework

Deploy one of your Next.js apps to Vercel and share the live URL, then push a small change and watch it redeploy.