Encountering a NextJs error while trying to establish a connection to MongoDB using

I am attempting to establish a connection with my mongodb database and retrieve some data within the server side component of my nextJs application

Below is my connection function:

import mongoose from "mongoose"

const connectDb = async()=>{
  try {
    await mongoose.connect(process.env.MONGO_DB)
    console.log("Connected Successfully")
  } catch (error) {
    console.log(error)
  }
}

export default connectDb

Here is my model:

import { Schema, model, models } from "mongoose";

interface IProject {
  id: number,
    name: string,
    skills: string[],
    demoLink: string,
    repoLink: string,
    imgUrl:string,
}

const projectSchema = new Schema<IProject>({
    id: {type:Number},
    name: {type:String,required:[true,"DemoLink is Required"]},
    skills: {type:[],required:[true,"Enter One Skill at least"]},
    demoLink: {type:String, required:[true,"DemoLink is Required"]},
    repoLink: {type:String, required:[true,"RepoLink is Required"]},
    imgUrl:{type:String, required:[true,"Image Url is Required"]},
})

const Project = models.Project || model<IProject>("Project", projectSchema)

export default Project

Finally, this is my server component:

import Project from "@/models/project"
import connectDb from "../connect"

const Home = async () => {
  await connectDb()
  const project = await Project.find()
  return (

    <div>{project && JSON.stringify(project)}</div>
  )
}

export default Home

After running my application, I encountered the following error message: "MongooseError: Operation projects.find() buffering timed out after 10000ms at Timeout"

Answer №1

  1. First step is to establish a new endpoint within the /api folder,
  2. Develop a GET request handler
  3. Subsequently, integrate the endpoint into your component with an HTTP protocol handler such as the Fetch API or a tool like axios.

Referencing numerous examples on Github can be incredibly helpful in this process.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why is it that I am unable to locate the build folder after executing the npm run build command in a Next.js project?

I recently completed a project using the Nextjs framework and everything seemed to be running smoothly when I used the command npm run dev. However, when I tried building the project with the command npm run build, I encountered an issue where the build fo ...

Ionic - Smooth horizontal tab scrolling for sorted categories

Currently, we are developing a web/mobile application that includes horizontal scroll tabs to represent Categories. While this feature works well on mobile devices, it requires additional functionality for web browsers. Specifically, we need to add two arr ...

Updating FormGroup Value in Angular When Value Changes

I am working on a project where I need to dynamically set a value for a formControl within a formGroup based on changes to another formControl in the same formGroup. However, when I attempted to implement this, I encountered an error stating: maximum call ...

The bespoke node package does not have an available export titled

No matter what I do, nothing seems to be effective. I have successfully developed and launched the following module: Index.ts : import ContentIOService from "./IOServices/ContentIOService"; export = { ContentIOService: ContentIOService, } ...

Issue: Module 'C:UsersElieProjectsMEAN ask-managerapiindex.js' not found

I have been following this amazing YouTube playlist and we just finished building a model. Now, it's time to test it out! I ran the nodemon command to start the API, but encountered an error. You can view the error here. Additionally, you can check o ...

Enhance your Next.js application by including the 'style' attribute to an element within an event listener

I am currently trying to add styles to a DOM element in Next.js using TypeScript. However, I keep getting the error message "Property 'style' does not exist on type 'Element'" in Visual Studio Code. I have been unable to find an answer ...

Issue encountered: Unable to delete database in MongoDB

Having trouble with dropping the database named crunchbase in my mongodb. Even after executing db.dropDatabase(), the console shows it's successful but the crunchbase remains in mongodb. Any insights on what might be causing this? Thanks. https://i.s ...

Error: The schema configuration is invalid. The value ${name} is not allowed

Project Link: https://github.com/k4u5hik/node-express-course I'm currently experimenting with populate.js to automatically import data from products.json into my MongoDB database using mongoose. The schema is defined in product.js. product.js co ...

Angular: Retrieving the Time Format from the Browser

Is there a way to retrieve the time format from the operating system or browser within Angular in order to display time in the user's preferred format? I have attempted to search for a solution, but have come up empty-handed. Thank you in advance! ...

Encountering a JavaScript/TypeScript issue that reads "Unable to access property 'Items' as it is undefined"

I encountered an issue with Javascript where I'm receiving an error message stating "Cannot read property 'Items' of undefined". The this keyword is consistently showing as undefined in the Base class. How can this problem be resolved? Coul ...

Is it regular practice in file uploads to first upload the file to the server before transferring it to the database or cloud storage?

In the process of developing my MERN stack application, I am faced with the challenge of allowing only authenticated users to upload media files and carry out basic read and delete operations on them. Previously, my application utilized Firebase Storage t ...

Insert a symbol at the beginning of the Autocomplete component in Material-UI

I am looking to enhance the Autocomplete component by adding an icon at the beginning using startAdornment. I discovered that Autocomplete functions as a regular text input. My attempt so far involved inserting: InputProps={{startAdornment: <InputAdorn ...

Having trouble retrieving data using a custom URL in Axios with ReactJs

My knowledge of Reactjs is still new and I am currently working on a project using nextjs. I have a component called Trending.js that successfully fetches data from the URL "https://jsonplaceholder.typicode.com/users". However, when I try to change the U ...

Unable to find solutions for all parameters needed by a CustomComponent within Angular

Whenever I attempt to compile the project for production, an error pops up: There is a problem resolving all parameters for EmployeeComponent in C:/.../src/app/employee/employee.component.ts: (?, ?, ?). Oddly enough, when I run the application, every ...

Utilizing Nextjs version 13 for implementing an API route with the ytdl-core

Recently, I've been experimenting with setting up a basic YouTube downloader using ytdl-core & nextjs. In my code, there's an onClick function that makes an API call. const onClick = async () => { await fetch("/api") .then(async (re ...

Adding a new field to an embedded document in MongoDB (without using an array)

My task involves updating a json document in mongodb by single field. Despite the simplicity if my data was in an object array, it's more complex due to objects within objects caused by early design choices and reasons. This is the structure of the s ...

Mocked observables are returned when testing an Angular service that includes parameters

I'm currently exploring various types of unit testing and find myself struggling with a test for a service once again. Here is the function in my service that I need to test: Just to clarify: this.setParams returns an object like {name: 'Test&ap ...

React application experiencing incorrect hexadecimal hash value output in crypto function

In my Reactjs app rendered by Nextjs, I am confused about why I am receiving different hash values in the web browser when using this code: crypto.createHash('sha256').update("12345678").digest("hex"); The expected hash value from the sha256 on ...

The limitations of Typescript when using redux connect

Recently, I utilized TypeScript for React to declare a class with constraints and now I'm looking to implement the connect method. Here is the code snippet: import * as React from 'react'; import { connect } from 'react-redux'; im ...

Getting access to the .env/.env.local file in Next.js (App Router)

I am facing an issue where I cannot read the API values from the .env/.env.local file in my Next.js application with the latest App Router. Based on my understanding, the .env file should be automatically enabled in React. I have tried multiple methods t ...