Deploying Full Stack Apps to Vercel: The Complete Production Guide
Deploying a frontend application to Vercel is incredibly simple — often just a few clicks.
But deploying a production-ready full stack application requires a deeper understanding of:
- Serverless functions
- Environment variables
- Database connection handling
- CORS policies
- API routing
- Domain configuration
- Deployment architecture
Whether you're deploying a Next.js SaaS platform, a MERN stack application, or an AI-powered web app, this guide covers everything you need to know.
Why Use Vercel for Full Stack Apps?
Vercel is no longer just a static hosting platform.
With Serverless Functions, Edge Middleware, and seamless Git integrations, it has become one of the best platforms for modern full stack deployments.
Key Advantages
⚡ Global Edge Network
Your frontend assets are automatically cached across Vercel’s global CDN for faster loading times and better Core Web Vitals.
🚀 Automatic Scaling
API routes scale automatically depending on traffic demand.
🔄 Git-Based Deployments
Every Git push generates:
- Preview deployments
- Production builds
- Rollback support
🔒 Built-In SSL
Every deployment gets HTTPS enabled automatically.
🧠 Excellent DX (Developer Experience)
Minimal DevOps overhead lets you focus on building products instead of managing infrastructure.
Prerequisites
Before deploying, make sure you have:
- A GitHub/GitLab/Bitbucket repository
- A Vercel account
- A production database
- Environment variables ready
Recommended Databases
| Database | Best For |
|---|---|
| MongoDB Atlas | MERN applications |
| Neon PostgreSQL | Next.js + Prisma |
| Supabase | Realtime apps |
| PlanetScale | Scalable MySQL |
Understanding Full Stack Architectures on Vercel
There are two common approaches.
1. Decoupled Architecture (MERN Stack)
Frontend and backend are deployed separately.
my-app/
├── client/ # React / Vite frontend
└── server/ # Express backend
Typical Stack
Frontend
- React
- Vite
- TailwindCSS
Backend
- Node.js
- Express.js
- MongoDB
2. Monolithic Architecture (Next.js)
Everything lives in a single repository.
my-next-app/
├── app/
│ ├── page.tsx
│ └── api/
│ └── users/route.ts
This is currently the most optimized architecture for Vercel.
Deploying a MERN Backend on Vercel
Unlike traditional VPS hosting, Vercel runs backend APIs as serverless functions.
This means:
- No permanent server process
- No
app.listen() - Functions spin up only when needed
Setting Up vercel.json
Create a vercel.json file inside your backend directory.
{
"version": 2,
"builds": [
{
"src": "api/index.js",
"use": "@vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "api/index.js"
}
]
}
This tells Vercel:
- Which file is the serverless entry point
- How to route incoming traffic
Express Server Setup for Vercel
api/index.js
const express = require('express');
const cors = require('cors');
const mongoose = require('mongoose');
const app = express();
app.use(cors({
origin: process.env.CLIENT_URL,
credentials: true
}));
app.use(express.json());
app.get('/api/health', (req, res) => {
res.status(200).json({
success: true,
message: 'API Running'
});
});
module.exports = app;
Important: Never Use app.listen()
This is one of the biggest mistakes beginners make.
❌ Wrong:
app.listen(5000);
✅ Correct:
module.exports = app;
Vercel handles the server lifecycle automatically.
Environment Variables
Never push secrets to GitHub.
Add Variables in Vercel Dashboard
Go to:
Project → Settings → Environment Variables
Common Variables
MONGODB_URI=
JWT_SECRET=
CLIENT_URL=
NEXTAUTH_SECRET=
DATABASE_URL=
OPENAI_API_KEY=
Database Connection Best Practices
Why This Matters
Serverless functions are stateless.
Every request may create a new database connection.
Without optimization:
- You hit connection limits
- Performance becomes unstable
- APIs become slow
MongoDB Connection Caching
Recommended Approach
let isConnected = false;
const connectDB = async () => {
if (isConnected) return;
const db = await mongoose.connect(process.env.MONGODB_URI);
isConnected = db.connections[0].readyState;
};
module.exports = connectDB;
Prisma Setup for Next.js
If using Prisma:
import { PrismaClient } from '@prisma/client'
const globalForPrisma = globalThis
export const prisma =
globalForPrisma.prisma ||
new PrismaClient()
if (process.env.NODE_ENV !== 'production')
globalForPrisma.prisma = prisma
This prevents multiple Prisma instances during development.
Deploying Frontend + Backend Separately
Frontend Deployment
Deploy:
/client
Backend Deployment
Deploy:
/server
Then connect them using environment variables.
Connecting Frontend to Backend
Example:
VITE_API_URL=https://your-api.vercel.app
or
NEXT_PUBLIC_API_URL=https://your-api.vercel.app
Deploying with GitHub (Recommended)
Step-by-Step
1. Push Code to GitHub
git add .
git commit -m "Initial deployment"
git push
2. Import Repository in Vercel
Go to:
- Add New
- Project
- Import Git Repository
3. Configure Root Directory
| Project | Root Directory |
|---|---|
| Frontend | /client |
| Backend | /server |
| Next.js | / |
4. Add Environment Variables
Paste all required secrets before deployment.
5. Deploy
Vercel automatically:
- Installs dependencies
- Builds the project
- Creates preview deployments
- Generates a production URL
Deploying with Vercel CLI
Install CLI:
npm install -g vercel
Login:
vercel login
Deploy:
vercel
Production deployment:
vercel --prod
Custom Domain Setup
Add Your Domain
Go to:
Project → Settings → Domains
Add:
yourdomain.com
DNS Configuration
Vercel will provide records like:
A Record
76.76.21.21
CNAME Record
cname.vercel-dns.com
Common Deployment Issues
1. CORS Errors
Problem
Access-Control-Allow-Origin
Solution
app.use(cors({
origin: process.env.CLIENT_URL,
credentials: true
}));
Also verify:
- Correct production frontend URL
- No trailing slash mismatch
2. Function Timeout Errors
Problem
504 Gateway Timeout
Cause
Heavy processing inside serverless functions.
Solutions
Use Background Jobs
Recommended services:
- Inngest
- Upstash QStash
- Trigger.dev
Optimize Database Queries
Avoid:
- Large aggregations
- Blocking operations
3. Build Failures
Common Reasons
Missing Environment Variables
Example:
DATABASE_URL missing
Incorrect Node Version
Specify:
{
"engines": {
"node": "20.x"
}
}
4. API Routes Not Working
Check:
- File naming
- Export syntax
- Route paths
vercel.json
Production Deployment Tips
Use Separate Environments
Vercel supports:
- Development
- Preview
- Production
Enable Analytics
Vercel Analytics helps track:
- Speed
- Performance
- Core Web Vitals
Use Edge Middleware Carefully
Great for:
- Authentication
- Redirects
- Rate limiting
But avoid heavy logic inside middleware.
Recommended Tech Stack for 2026
Best Overall Stack
Frontend
- Next.js 15
- TailwindCSS
- ShadCN UI
Backend
- Server Actions
- Route Handlers
Database
- PostgreSQL + Prisma
Auth
- Better Auth / Clerk
Deployment
- Vercel
Final Thoughts
Vercel provides one of the best developer experiences for deploying modern full stack applications.
Once you understand:
- Serverless architecture
- Environment variable management
- Database optimization
- Routing strategies
you can deploy highly scalable production-grade apps in minutes.
The biggest advantage is speed:
- Faster iteration
- Preview deployments
- Minimal infrastructure management
Which means more time building products and less time handling DevOps.












