How to deploy a Next.js build
To build and deploy a Next.js app, follow the steps below depending on your deployment target. I'll first give the general process, then specific guides for common hosting options.
✅ General Build & Deploy Steps (Any Platform)
1. Build Your Next.js App
Run this in the root of your project:
npm run build
This generates the .next/
directory with optimized output.
2. Start Locally (Optional)
You can test the production build:
npm start
Make sure your package.json
has this script:
"start": "next start"
🚀 Deployment Options
🔹 A. Vercel (Recommended for Next.js)
Vercel is made by the creators of Next.js.
Go to
https://vercel.com
Connect your GitHub/GitLab/Bitbucket repo
Vercel auto-detects Next.js and handles everything
Push to
main
and your app is deployed
✔️ Auto builds, SSR, ISR, and Edge Functions supported out-of-the-box
🔹 B. Node.js Server (Custom VPS, Docker, etc.)
If you're self-hosting with a custom server:
Build your app:
npm run build
Start with:
npm start
Make sure
next
,react
, andreact-dom
are in yourdependencies
(notdevDependencies
).Deploy to your server (via SSH, Docker, etc.)
Example Dockerfile
:
FROM node:18-alpine
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]
Then build and run:
docker build -t my-next-app .
docker run -p 3000:3000 my-next-app
🔹 C. Static Export (For Static Sites Only)
If your app doesn't use SSR, you can export a static version:
next export
This creates an out/
folder. You can then host it on:
GitHub Pages
Netlify
Firebase Hosting
Cloudflare Pages
Any static hosting service
But SSR, API routes, and dynamic rendering won’t work in this mode.
🧠 Summary
| Hosting | SSR/ISR Support | Setup Effort | Notes |
| ------------- | --------------- | ------------ | -------------------------- |
| Vercel | ✅ Full | Easiest | Best for most Next.js apps |
| Node Server | ✅ Full | Medium | Use `next start` |
| Static Export | ❌ Static only | Low | Use `next export` |
Let’s stay connected across all platforms!
Instagram: @angular_development
Facebook: Learn Angular
Software Dev: TopMate.io
Threads: @angular_development
LinkedIn: InfoWeb Technologies
Training Portal: Beginner to Pro Training
Newsletter: CodeForWeb Substack
Pinterest: Tech Nerd Life
Portfolio: InfoWeb Technologies
Projects: Next Generation Projects
📧 For business inquiries:
Feel free to contact us at softwaredeveloper321@protonmail.com