How to properly connect to MongoDB through front-end application?

I am currently using MongoDB for my front-end application. It appears that every time I am trying to get/post information to my database, I create multiple new connections (and sometimes I end up with 60+ connections after working for 30 minutes). Here is my current setup:

let db: Db;

class Mongo {
  client: MongoClient;
  constructor() {
    this.client = new MongoClient(url);
  }

  async boot() {
    await this.client.connect();

    db = this.client.db();
  }
}

const mongo = new Mongo();

const connectToMongo = async () => {
  if (!db) {
    console.log("Booting Mongo");
    await mongo.boot();
  } else {
    console.log("No boot needed");
  }

  return db;
};

I am storing the database variable that I get so that I can make multiple calls with it. When I read data from MongoDB, I always have to boot it initially and then I don’t have to after that (because I have stored the variable) but it seems like multiple connections are made every time I try to use mongo.

Right now I am using Nextjs to build my application. What is the proper way to store the database so that I don’t continue to stack up connections?

May be, what you see is normal. See https://www.mongodb.com/docs/manual/administration/connection-pool-overview/.