I’m using next.js frontend. How to solve this!

‘use client’
import React, { useState, useEffect } from ‘react’;
import * as Realm from ‘realm-web’;
const { ObjectId } = require(‘bson’);
// const { MongoClient } = require(‘mongodb’);

const MyPage = () => {
const [products, setProducts] = useState();
const [type, setType] = useState(‘’);
const [brand, setBrand] = useState(‘’);
const [editingProduct, setEditingProduct] = useState(null);

// const localUri = ‘mongodb://localhost:27017’;
// const localClient = new MongoClient(localUri, { useNewUrlParser: true, useUnifiedTopology: true });
// const localDbName = ‘store’;
// const localCollectionName = ‘products’;

const REALM_APP_ID = ‘application-0-wlfjx’;
const app = new Realm.App({ id: REALM_APP_ID });
const credentials = Realm.Credentials.anonymous();

useEffect(() => {
const fetchData = async () => {
try {
const user = app.currentUser || (await app.logIn(credentials));
const mongodb = user.mongoClient(‘mongodb-atlas’);
const db = mongodb.db(‘store’);

    const productsCollection = db.collection('products');
    const productsToStore = await productsCollection.find();

    setProducts(productsToStore);
  } catch (error) {
    console.error(error);
  }
};

fetchData();

}, [app, credentials]);

const addProduct = async () => {
try {
const user = await app.logIn(credentials);
const mongodb = user.mongoClient(‘mongodb-atlas’);
const db = mongodb.db(‘store’);
const newProduct = { _id: new ObjectId, type, brand };

  const productsCollection = db.collection('products');

  await productsCollection.insertOne(newProduct);

  await localClient.connect();
  const localDatabase = localClient.db(localDbName);
  const localCollection = localDatabase.collection(localCollectionName);

  // Insert data
  await localCollection.insertOne({ type, brand });

  console.log('Data inserted successfully');
} finally {
  await localClient.close();
}

};

// const addProduct = async () => {
// try {
// const user = await app.logIn(credentials);
// const mongodb = user.mongoClient(‘mongodb-atlas’);
// const db = mongodb.db(‘store’);
// const newProduct = { _id: new ObjectId, type, brand };

// const productsCollection = db.collection(‘products’);

// await productsCollection.insertOne(newProduct);

// setType(‘’);
// setBrand(‘’);

// const updatedProducts = await productsCollection.find();
// setProducts(updatedProducts);
// } catch (error) {
// console.error(error);
// }
// };

const updateProduct = async () => {
try {
const user = await app.logIn(credentials);
const mongodb = user.mongoClient(‘mongodb-atlas’);
const db = mongodb.db(‘store’);

  const productsCollection = db.collection('products');

  await productsCollection.updateOne(
    { _id: editingProduct._id },
    { $set: { type, brand } }
  );

  setEditingProduct(null);
  setType('');
  setBrand('');

  // Fetch updated data
  const updatedProducts = await productsCollection.find();
  setProducts(updatedProducts);
} catch (error) {
  console.error(error);
}

};

const handleEditProduct = (product) => {
setType(product.type);
setBrand(product.brand);
setEditingProduct(product);
};

const handleCancelEdit = () => {
setType(‘’);
setBrand(‘’);
setEditingProduct(null);
};

const handleDeleteProduct = async (productId) => {
try {
const user = await app.logIn(credentials);
const mongodb = user.mongoClient(‘mongodb-atlas’);
const db = mongodb.db(‘store’);

  const productsCollection = db.collection('products');
  await productsCollection.deleteOne({ _id: productId });

  // Fetch updated data
  const updatedProducts = await productsCollection.find();
  setProducts(updatedProducts);
} catch (error) {
  console.error(error);
}

};

return (
<>

<ion-input
value={type}
onInput={(e) => setType(e.target.value)}
label=“Type”
>

  <ion-item>
    <ion-input
      value={brand}
      onInput={(e) => setBrand(e.target.value)}
      label="Brand"
    ></ion-input>
  </ion-item>

  {editingProduct ? (
    <>
      <ion-button onClick={updateProduct} expand="full" color="warning">
        Update Product
      </ion-button>
      <ion-button onClick={handleCancelEdit} expand="full" color="danger">
        Cancel
      </ion-button>
    </>

  ) : (
    <ion-button onClick={addProduct} expand="full" color="success">
      Add Product
    </ion-button>
  )}

  <br />
  <h1>PRODUCTS</h1>
  {products.map((product, index) => (
    <ion-item key={index}>
      <ion-label>
        <h1>{product.type}</h1>
        <h1>{product.brand}</h1>
      </ion-label>
      <ion-button onClick={() => handleEditProduct(product)} color="warning">
        Edit
      </ion-button>
      <ion-button onClick={() => handleDeleteProduct(product._id)} color="danger">
        Delete
      </ion-button>
    </ion-item>
  ))}
</>

);
};

export default MyPage;

Everytime I used the ‘use client’ the there’s a problem but if I comment the package of mongodb the codes is working but I can’t put it to mongodb compass? How to solve that problem?