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.