Connecting NextJS with MongoDB

Introduction

Next.js a popular React framework for building web applications. Provides a powerful foundation for creating dynamic and performant websites. When it comes to handling data and integrating a database is often essential. MongoDB a NoSQL database is a great choice for its flexibility and scalability. In this blog post we’ll explore how to connect MongoDB with Next.js enabling you to seamlessly manage and retrieve data for your web applications.

Before diving into the integration process, make sure you have the following prerequisites in place:

• Node.js and npm installed on your machine.
• A MongoDB Atlas account or a locally running MongoDB server.

let’s Discuss How to connect MongoDB with NextJS ?

Setting up a NextJS Project

If you haven’t created a Next.js project yet than you can use the following commands to set up a new project:

npx create-next-app my-nextjs-app
cd my-nextjs-app
npm run dev

This will create a basic NextJS project and start the development server.

Installing Dependencies

To connect Nextjs with MongoDB. You’ll need the mongodb package. Install it using npm

npm install mongodb

Creating a MongoDB Connection

Now let’s establish a connection to your MongoDB database. Create a new file named mongodb.js in the lib directory of your NextJS project. This file will contain the MongoDB connection logic:

// lib/mongodb.js
import { MongoClient } from 'mongodb';

const uri = process.env.MONGODB_URI;
const options = {
  useNewUrlParser: true,
  useUnifiedTopology: true,
};

let client;
let connection;

const connectDatabase = async () => {
  if (!client) {
    client = new MongoClient(uri, options);
  }

  if (!client.isConnected()) {
    await client.connect();
  }

  connection = client.db('your-database-name');

  return connection;
};

export default connectDatabase;

Replace ‘your-database-name’ with the name of your MongoDB database. Make sure to store your MongoDB URI securely and use environment variables. You can create a .env.local file in your NextJS project and define your MongoDB URI like this:

MONGODB_URI=your-mongodb-uri

Now you can use this connection module wherever you need to interact with the MongoDB database in your NextJS application.

Using MongoDB in Pages or API Routes

To demonstrate how to use MongoDB in a NextJS page or API route. Let’s create a simple example. Create a new file named index.js in the pages directory:

// pages/index.js
import connectDatabase from '../lib/mongodb';

export default function Home({ data }) {
  return (
    <div>
      <h1>Nextjs with MongoDB</h1>
      <p>Data from MongoDB: {JSON.stringify(data)}</p>
    </div>
  );
}

export async function getStaticProps() {
  const db = await connectDatabase();
  const collection = db.collection('your-collection-name');
  const data = await collection.find({}).toArray();

  return {
    props: {
      data,
    },
    revalidate: 1,
  };
}

Replace ‘your-collection-name’ with the name of the collection you want to query. This example uses getStaticProps for server-side rendering. But you can adapt the approach based on your application’s needs.

Conclusion

Integrating MongoDB with Next.js enables you to build robust and data-driven web applications. By following the steps outlined in this guide. you’ve learned how to set up a MongoDB connection, use environment variables and fetch data from your database within NextJS pages or API routes. With this foundation you can explore more advanced features and build scalable applications with ease.