Connecting MongoDB to a Next.js Project

MongoDB is a versatile NoSQL database, and integrating it with a Next.js project opens up a world of possibilities for web applications. In this blog, we will explore how to connect MongoDB to a Next.js application, and we will provide detailed code examples for each step. We'll also briefly discuss other connection methods you can use in Next.js.

Prerequisites

Before we begin, ensure that you have Node.js, MongoDB installed, and you have initialized your Next.js project.

Creating a Next.js Project

To start a new Next.js project, you can use the npx command to initialize it:

npx create-next-app nextjs-mongodb --typescript

After creating your project, open it in your favorite code editor and run the development server with:

yarn dev

You should see your Next.js app running at http://localhost:3000.

Connecting MongoDB to Next.js

Now, let's connect MongoDB to your Next.js project. Follow these steps:

Step 1: Installing MongoDB Driver

To connect to MongoDB, you'll need the mongodb package. You can install it using npm or yarn:

yarn add mongodb

Step 2: MongoDB Atlas or Local Setup

Before you proceed, you need a MongoDB connection string. You can set up a free MongoDB Atlas cluster or use a local MongoDB database for development.

a. MongoDB Atlas:

1. Create a free MongoDB Atlas Cluster following the steps in this article.

2. Obtain your username, password, and cluster connection string.

b. Local MongoDB: If you prefer a local database, follow the instructions in this guide.

Step 3: Environment Variables

Create a .env.local file in your project root to store environment variables. Replace placeholders with your actual credentials.

MONGODB_URI=mongodb+srv://Username:Password@cluster0.dnnhc.mongodb.net/Database-Name?retryWrites=true&w=majority
MONGODB_DB=Database-Name

Step 4: MongoDB Configuration

Create a lib folder in your project's root directory and add a mongodb.ts file inside it.

// lib/mongodb.ts
import { Db, MongoClient } from "mongodb";

const MONGODB_URI = process.env.MONGODB_URI;
const MONGODB_DB = process.env.MONGODB_DB;

let cachedClient: MongoClient;
let cachedDb: Db;

export async function connectToDatabase() {
  if (cachedClient && cachedDb) {
    return {
      client: cachedClient,
      db: cachedDb,
    };
  }

  const opts = {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  };

  if (!MONGODB_URI) {
    throw new Error("Define the MONGODB_URI environmental variable");
  }

  if (!MONGODB_DB) {
    throw new Error("Define the MONGODB_DB environmental variable");
  }

  let client = new MongoClient(MONGODB_URI, opts);
  await client.connect();
  let db = client.db(MONGODB_DB);

  cachedClient = client;
  cachedDb = db;

  return {
    client: cachedClient,
    db: cachedDb,
  };
}

In this code, we define an initializer function that checks the MongoDB connection. If not connected, it establishes a connection and caches it.

Step 5: Creating API Routes

Create an API route for accessing MongoDB data. In the pages/api folder, add a file for your data source (e.g., blogs.ts).

// pages/api/blogs.ts
import { NextApiRequest, NextApiResponse } from "next";
import { connectToDatabase } from "../../lib/mongodb";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  let { db } = await connectToDatabase();

  const blogs = await db.collection("blogs").find().toArray();

  res.status(200).json({ blogs });
}

Here, we use the connectToDatabase function to retrieve the database instance and fetch data from the "blogs" collection.

Step 6: Testing Your API

You can test your API by making a GET request to the corresponding route. In your browser, visit:

http://localhost:3000/api/blogs

This will return the data from your MongoDB collection in JSON format.

Conclusion

Integrating MongoDB with your Next.js project is a powerful combination for building dynamic web applications. You've learned how to connect MongoDB to Next.js using environment variables, and we've provided code snippets to help you get started. While this guide focused on the Mongoose and MongoDB Native Node.js Driver approaches, other methods like using Prisma or custom middleware can also be explored based on your specific project needs. With this knowledge, you can create robust, data-driven web applications with ease.