So, you’ve built a shiny new Next.js app and you’re ready to show it off to the world—but how do you actually get it online?
Say hello to Vercel—the official platform for hosting Next.js apps. It’s fast, free (for personal projects), and stupidly simple to use.
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.app
Every 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
vercel
It 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.
Whether you’re a solo dev or building a startup, Vercel gives you everything you need to scale your Next.js app effortlessly.