In this guide, I’ll walk you through how to deploy your Next.js app to Vercel—step by step. Whether you’re building a portfolio, blog, or full-blown SaaS, this process has you covered. 🙌
🧱 Prerequisites
Before we begin, make sure you have:
- A GitHub/GitLab/Bitbucket account
- A free Vercel account
- A Next.js project (locally or on GitHub)
If you don’t have a Next.js app yet, you can create one with:
npx create-next-app my-app
cd my-app
npm run dev🔗 Step 1: Push Your Project to GitHub
If your project isn’t on GitHub yet, run these commands:
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/your-username/your-repo-name.git
git push -u origin main☁️ Step 2: Deploy on Vercel
- Go to https://vercel.com
- Click “New Project”
- Connect your GitHub account and select your Next.js repo
- Vercel will auto-detect that it’s a Next.js app (no need to configure anything)
- Click “Deploy” 🎉
That’s it. Seriously.
🌍 Step 3: Your App Is Live!
After a few seconds, Vercel will give you a live link like:
https://my-nextjs-app.vercel.appEvery time you push to your main branch (or whichever branch you chose), Vercel will automatically re-deploy your app.
⚙️ Optional: Custom Domain
Want to use your own domain? You can!
- Go to your project in the Vercel dashboard
- Click “Settings > Domains”
- Add your domain and update DNS settings as instructed
Vercel gives you free HTTPS (SSL) out of the box. 🔒
💡 Pro Tips
- ✅ You can enable preview deployments for every pull request
- ✅ Use environment variables in Vercel > Settings > Environment Variables
- ✅ Vercel supports Server-Side Rendering (SSR), Static Generation (SSG), and API routes
🧪 Bonus: Use the Vercel CLI
If you want to deploy from the terminal:
npm install -g vercel
vercel login
vercelIt will walk you through the deployment process and give you a live link right away.
🏁 Wrapping Up
Vercel makes deploying a Next.js app shockingly simple. No servers to configure, no complex setup—just push to GitHub, connect, and deploy.
