Connecting MongoDB with Next.js

MongoDB is a popular NoSQL database, and Next.js is a powerful React framework for building web applications. In this blog, we'll learn how to connect MongoDB with a Next.js app step by step.

Introduction

Integrating MongoDB with Next.js allows you to build full-stack applications with server-side rendering and API routes. We'll use the official mongodb Node.js driver.

Prerequisites

• Node.js and npm installed
• A MongoDB database (local or cloud, e.g., MongoDB Atlas)
• Basic knowledge of Next.js

Step 1: Install Dependencies

npm install mongodb

Step 2: Create a MongoDB Utility

Create a file lib/mongodb.js:

import { MongoClient } from "mongodb";
 
const uri = process.env.MONGODB_URI;
const options = {};
 
let client;
let clientPromise;
 
if (!process.env.MONGODB_URI) {
    throw new Error("Please add your MongoDB URI to .env.local");
}
 
if (process.env.NODE_ENV === "development") {
    if (!global._mongoClientPromise) {
        client = new MongoClient(uri, options);
        global._mongoClientPromise = client.connect();
    }
    clientPromise = global._mongoClientPromise;
} else {
    client = new MongoClient(uri, options);
    clientPromise = client.connect();
}
 
export default clientPromise;

Step 3: Use MongoDB in API Routes

Example: pages/api/posts.js

import clientPromise from "../../lib/mongodb";
 
export default async function handler(req, res) {
    const client = await clientPromise;
    const db = client.db("your-db-name");
    const posts = await db.collection("posts").find({}).toArray();
    res.json(posts);
}

Step 4: Add Environment Variables

Create a .env.local file:

MONGODB_URI=your-mongodb-connection-string

Conclusion

You can now connect your Next.js app to MongoDB and build dynamic, data-driven applications. Explore more advanced features like authentication and data validation in future posts.

Thank you!