DevOps
Full Stack
Next.js
MongoDB
Tutorial
Ask anything about this article
Hi! I've read this article.
What would you like to know?
@farhan
You've built an amazing full-stack app. Now you need to show it to the world. The good news? You can deploy everything for free. Here's the complete guide.
User → Vercel (Next.js Frontend + API Routes)
↓
MongoDB Atlas (Database - Free Tier)
↓
Railway/Render (Background Jobs - Optional)
0.0.0.0/0mongodb+srv://username:password@cluster0.xxxxx.mongodb.net/mydb
.env.local:MONGODB_URI=mongodb+srv://username:password@cluster0.xxxxx.mongodb.net/mydb
NEXTAUTH_SECRET=your-random-secret-string
NEXTAUTH_URL=http://localhost:3000
typescript// lib/mongodb.ts
import { MongoClient } from 'mongodb';
const uri = process.env.MONGODB_URI!;
let client: MongoClient;
let clientPromise: Promise<MongoClient>;
if (process.env.NODE_ENV === 'development') {
if (!(global as any)._mongoClientPromise) {
client = new MongoClient(uri);
(global as any)._mongoClientPromise = client.connect();
}
clientPromise = (global as any)._mongoClientPromise;
} else {
client = new MongoClient(uri);
clientPromise = client.connect();
}
export default clientPromise;
MONGODB_URINEXTAUTH_SECRETNEXTAUTH_URL → your Vercel domainThat's it. Vercel automatically:
.vercel.app domain| Service | Free Tier Limit |
|---|---|
| Vercel | 100GB bandwidth, 100 deployments/day |
| MongoDB Atlas M0 | 512MB storage, shared RAM |
| Railway | $5 credit/month |
| Render | 750 hours/month |
You now have a production-grade deployment pipeline that costs exactly $0. Ship your projects and build your portfolio!