Hi! I'm a beginner to next.js.

I'm making a page to display a project with information from a MongoDB database. A module i'm using requires the page to have "Use Client" at the top. But then when I add import { getProject } from "@/lib/data" and issue npm run dev, the program hangs on ○ Compiling /projects/[slug] ... and never compiles. When I remove "Use Client" from the top, the issue resolves, but I cannot use the module I need. Could someone help me figure out how to successfully import getProject with "Use Client" at the top?


Here is the code:
webpage

"use client"
import { getProject } from "@/lib/data"
const ProjectsPage = async ( {params} ) => {
    const { slug } = params;
    return (
        <div></div>
    );
}

export default ProjectsPage

@/lib/data.js

import { Project } from "./models"
import { User } from "./models"

import { connectToDb } from "./utils"


export const getProjects = async() => {
    try {
        connectToDb();
        const projects = await Project.find();
        return projects;
    }
    catch (err){
        console.log(err);
        throw new Error("Failed to get Projects!");
    }
};

export const getProject = async(slug) => {
    try {
        connectToDb();
        const project = [];//await Project.find({slug: slug})
        return project;
    }
    catch (err){
        console.log(err);
        throw new Error("Failed to get Project!");
    }
};
...

./utils.js

const {default : mongoose} = require("mongoose");

// Store connection in case running in dev mode.
const connection = {};


export const connectToDb = async() => {
    try {
        if (connection.isConnected){
            console.log("Using existing connection");
            return;
        }
        const db = await mongoose.connect(process.env.MONGO);
        connection.isConnected = db.connections[0].readyState;
      } catch (error) {
        console.log(error);
        throw new Error(error);
      }
}

@/lib/models

import mongoose from "mongoose";
...
const projectSchema = new mongoose.Schema({
    title: {
        type: String,
        required: true
    },
    desc: {
        type: String,
        required: true
    },
    img: {
        type: String,
    },
    userId: {
        type: String,
        required: true
    },
    slug: {
        type: String,
        required: true,
        unique: true
    }

},
{ timestamps: true}
);
...
export const Project = mongoose.models.Project || mongoose.model("Project", projectSchema);

package.json

"dependencies": {
    "aws4": "^1.12.0",
    "gist-react": "^1.0.2",
    "mongoose": "^8.0.0",
    "next": "14.1.0",
    "react": "^18",
    "react-dom": "^18",
    "react-router-dom": "^6.22.0"
  },