I am trying to connect mongoDB with my nextjs (14) project through mongoose. But I am encountering problem with connecting mongoDB with nextjs (14).
It’s a simple nextjs form project to push email and username to my database and then read it to show those info.
When I try to submit data to my database it show’s this error …
MongooseError: Operation users.insertOne() buffering timed out after 10000ms at Timeout. (D:\joy\nextJs\week nine\data-fetching\fetch-data\node_modules\mongoose\lib\drivers\node-mongodb-native\collection.js:185:23) at listOnTimeout (node:internal/timers:573:17) at process.processTimers (node:internal/timers:514:7)
This is my connectMongo function to connect mongoDB with nextjs.
import mongoose from "mongoose";
const MONGO_URI = process.env.MONGO_URI;
const cached = {};
async function connectMongo() {
if (!MONGO_URI) {
throw new Error(
"Please define the MONGO_URI environment variable inside .env.local"
);
}
if (cached.connection) {
return cached.connection;
}
if (!cached.promise) {
const opts = {
bufferCommands: false,
};
cached.promise = mongoose.connect(MONGO_URI, opts);
}
try {
cached.connection = await cached.promise;
} catch (e) {
cached.promise = undefined;
throw e;
}
return cached.connection;
}
export default connectMongo;
This is UserShema model…
import mongoose from "mongoose";
const UserSchema = new mongoose.Schema({
name: {
type: String,
default: "Anonymous",
min: 2,
max: 100,
},
email: {
type: String,
match: [
/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/,
"Please fill a valid email address",
],
min: 2,
max: 100,
},
});
const User = mongoose.models.User || mongoose.model("User", UserSchema);
export default User;
and this is my form component…
import connectMongo from "@/dbConnect/connectMongo";
import User from "@/models/User";
export default function NewUserForm() {
const addUser = async (formData) => {
"use server";
const name = formData.get("name");
const email = formData.get("email");
const userData = {
name,
email,
};
try {
await connectMongo;
await new User(userData).save();
} catch (error) {
console.log(error);
}
};
return (
<form action={addUser}>
<div>
<input type='text' name='name' placeholder='Name' />
</div>
<div>
<input type='email' name='email' placeholder='Email' />
</div>
<div>
<button type='submit'>Submit</button>
</div>
</form>
);
}
point to be noted: I changed my local DNS to google DNS (8.8.8.8) and in mongoAtlas network access I allowed all user to access.