Deploying your Next.js app doesn’t need to be complicated. With Vercel, the official platform from the creators of Next.js, you can go live in under 5 minutes — with automatic builds, previews, and global CDN included.
In this step-by-step guide, we’ll walk you through how to deploy your Next.js project to Vercel using GitHub. Whether you're building a SaaS app or a personal portfolio, you'll be live and online in no time.
1. Prepare Your Next.js App
Before deploying, make sure your app is ready:
- It should be built with the official Next.js framework.
- You should have your code pushed to a GitHub repository.
If you haven’t pushed your project yet:
git init git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/your-username/your-repo.git
git push -u origin main
Make sure your app runs locally without errors:
npm run dev
If you’re using app/
directory (Next.js 13+), or custom next.config.js
, no worries — Vercel handles both seamlessly.
2. Deploy to Vercel from GitHub
Now that your code is on GitHub, let’s deploy:
- Go to vercel.com and sign in using GitHub.
- Click “Add New Project”.
- Select the GitHub repo that contains your Next.js app.
- Vercel will auto-detect that it’s a Next.js project — no config required.
- Click “Deploy” and wait a few seconds.
And that’s it! 🎉 You’ll get a live URL like:
https://your-app-name.vercel.app
Every time you push changes to GitHub, Vercel will auto-deploy your app. You also get preview deployments for each pull request.
3. (Optional) Add a vercel.json
Config File
If you need advanced customization (routes, redirects, env variables), create a vercel.json
file at your project root:
{ "rewrites": [ { "source": "/old-route", "destination": "/new-route" } ] }
You can also set environment variables directly from the Vercel dashboard under Project Settings → Environment Variables.
Final Thoughts
Deploying a Next.js app to Vercel is fast, reliable, and beginner-friendly. With automatic GitHub integrations, global edge networks, and zero-config builds, it’s the go-to platform for modern web apps.
If you're building a product, portfolio, or MVP, deploying early and often is key — and Vercel makes that effortless.
Ready to Build Something Amazing?
Skip the design phase and jumpstart your project with our premium Next.js templates. Production-ready, fully customizable, and built with modern best practices.
Browse Templates