How to use Mongoose with Next.js for MongoDB | Explained with simple project
ฝัง
- เผยแพร่เมื่อ 12 ก.ย. 2024
- Hello, my friends and fellow developers!
In this video, we cover how you can set up Mongoose with Next.js to connect your MongoDB database. We'll also build a project!
Let me know in the comments below if you want more MongoDB and Next.js videos or any other videos.
GitHub Repository: github.com/max...
🧾 Article: blog.usmans.me...
Other Tutorials:
⚛️ React and Material UI Todo App: bit.ly/reactma...
🟨 Other JavaScript videos: bit.ly/jstutor...
📘 Visual Studio Code videos: bit.ly/vscodevids
🔋 Build a Battery App in JS: • 🔋 Build a Battery Info...
Connect 🔗 :
Twitter: / maxprogramming1
Facebook: / max-programming-103081...
Github: github.com/max...
🎥 Gear I use:
🎤 Mic: amzn.to/3DGqEH9
🎙️ Mic Holder: amzn.to/3NAnM2U
🎧 Headphones: amzn.to/3Wy7CuZ
⌨ Keyboard: amzn.to/3E2mSci
📷 Webcam: amzn.to/3Tb0Ice
VS Code Theme used: 🌃 Midnight Synth
Suggest, ask doubts in the comments and share these videos to help!
Thanks for Watching!
#reactjs #mongodb #nextjs
I was looking through the internet for hours and couldn't find a way to display content from mongo using SSR, this video instantly helped me. ggs
I'm glad this was helpful to you 🙂
I was just confused about next JS & MongoDB task. Now, I have understood everything. Very helpful video!
countless nights connecting my mongodb without errors, and tou are the hero
😇
Thank you for the kind words 🙂
can you help? i have an app folder but not a pages folder?@@MaxProgramming
I am back again just to say you saved my week. 🎉 12 hours later and it’s working man. This tutorial is gold. Good STUFF
I am so happy it worked as expected!
@@MaxProgramming boss
Nice explanation. I've been searching for hours for the specific instruction on how to go about my project, and your video nailed it. Simple and helpful. Thanks and more power to you.
Great video man. Was bashing my head agains the wall all day with this as it's been a while since I've used Mongo and mongoose and you've just saved us a lot of time. Appreciate it! I also would love to see a full project with NextJS, Mongo and Redux as another commenter said, if you ever get around to it. Cheers.
Thanks Tyler!
I gotta get my hands dirty with Redux and then I'll make a tutorial of the project with the same stack.
By the way would you like to see that in the Next.js app directory?
@@MaxProgramming Whichever you see fit is fine with me. We’re currently using the pages directory but will eventually have to re-factor for the app directory, so sounds good to me.
Cheers
mann, i had some of that model/models error earlier playing around on this. glad i did and then got your explanation. appreciate the vid!
Thank You for this, If you have more videos that are simple and clear like this one I will be watching them!
Really great presentation. The most impactful parts were explanations on common errors and how to solve them.
Dude if this works, you’re my actual Superman
Wonderful explanation. With this I can figure out the Delete and Update to make a CRUD app. Exactly what I needed to move a PostgreSQL to MongoDB with NextJS.
Outstanding !!! Brother 🍫❣️ just like a piece of cake. Keep it up .
I was trying to integrate mongoDB with next app and I was looking for a solution where i can do the basic tasks , and with simplicity ofcourse, i also tried many articles and the example with mongo templates of next js as well , but could not help my self as they are manything but not simple, yours is a very good approach in that sense, Happy Hacking!
Man, the best and simple video about mongoose and nextjs.
Thank you so much man! I was getting so many errors all the time. You fixed them all :)
Happy to help buddy 🙂!
I don't usually comment on videos. But this is great one. Thank you so much.
😀 So nice of you! Glad it helped!
Thank you so much for this video! Loved how you explained things clearly! Subscribed after this one :)
Simple and clear.
Very nice practical look to building a edge case proof application quickly. Thanks
This was incredibly helpful. Thank you
Thank you so much Usman for this Tutorial, You deserve Nobel Prize man
Thank You for the great words ☺
Thank you very much for this, It helped a lot. Keep doing the great work!
Brother, this is really helpful tutorial for me. You gave a really good solution for using models directly on getServerSideProps(). Keep it up.
Thanks a lot! I'm glad it helped!
Thank you for the clear explanation. Nicely done.
Great video, hey just wanna ask, what font are you using in your vscode? I like the font, it's easy to read and the brackets also is highlited.
Thank you! I use the Cascadia Code font with ligatures.
And yeah the bracket color is an in-built setting in VS Code
@@MaxProgramming Thank you, applied it and loving it now.
Wow your explanation is so easy and practical. Would please build a project with Redux, Next and Mongoose? Best of luck for your channel.
Thanks! Will surely try to do the project 🙂
u save my lot of time now i understand
this and this are same was best part for me
Solved my problem, thanks!
Thank you for the video it was simple and self explanatory
Thanks for you help! You have a new subscriber
subbed and followed on github. great explainations man loved every second of the video
Good to know 😊. Thank you
Very well explained. So helpful!
Absolutely amazing! Thank you so much! God bless you 🙏!
Awesome walkthrough!
Thank you for this outstanding tutorial!
Thank you so much, this is very useful and helpful 👍
Thanks brother
This is a great video thanks bro👍🏾
Should i use this setup for blogs or cms would be better?
Yep! This setup will work perfectly fine.
cool thank has been useful!
thx for awesome video
Thank you so much brother...
Would it matter if I fetched "tests" using getStaticProps instead or it's gotta be strictly getServerSideProps?
Doesn't matter if you use getStaticProps, getStaticPaths or getServerSideProps.
These functions run on the server hence they are used to fetch the data. You possibly can't fetch data inside the React components
Thanks boss!!!
Great video! On to the point.
Why did you put the mongodb connect function inside a route? It will run everytime someone hits the route
Next.js doesn't behave like a fully functional backend API, hence, we can't connect to it at first and then use it later on.
Whenever someone hits the API route, it has to connect to MongoDB first, and then it can make changes to the DB.
If you wanna know more, I would suggest checking out this video that explains how Next.js's backend works compared to a different normal backend: th-cam.com/video/Rrz2q5uCHdE/w-d-xo.html
thanks a lot for this, please on production, after deploying the site, once Irefresh the page it returns 500 error, server error, but on first load, it's normal only after refresh
Wherever you deployed it, check of you put the environment variables right way.
Also check the production logs. Because that's where you will get the actual error message
What if I have many endpoints? Should I call connectMongo() in every one of them?
Yes. The way lambda functions/API routes are designed you will have to do that as far as I know
very good
Thanks so much :)
Great video! but sincierly, it was a bit confusing for me
Thanks for the generous feedback 🙂. Let me know which part felt confusing to you and I'll work on it ✌️
i think when you use connect it doesn't re creates the database conenction when hot module reload occurs in nextjs instead it reuses the old connection everytime maybe that's the reason you simple called connect function.
Actually the connect function connects to the database everytime. I don't think that the API routes preserve database connection as you can't also run websockets there
Thanks for video. but i am getting error. TypeError: mongoose__WEBPACK_IMPORTED_MODULE_0___default(...).connect is not a function
Try importing it the other way
import * as mongoose from 'mongoose'
And then use mongoose.connect()
Is there a place in nextjs app where we can initialize the connection to mongodb as we would do in an express project ?
Actually, that might be possible in some way. But the way NextJS has the API Routes, it will eventually disconnect from MongoDB and that's why we connect to the DB everytime.
How can I make the data from getServerSideProps update every time I create new test using the button on UI. Do I use useState and useEffect? and if so, how can I do that please?
If you fetch data from getServerSideProps, the only way to get the updated data is by doing a full refresh.
A better way to handle this is by using either SWR or React Query with the NextJS APi Routes.
React Query: tanstack.com/query/v4
Although you can also refetch data with React Query and getServerSideProps together:
tanstack.com/query/v4/docs/guides/ssr
@@MaxProgramming Got it...thanks alot for the info and quick reply. And also for the great content you provide. You're helping a lot of ppl. 🙏
@@johnappolo Really appreciate your support 😄
Which VSCDOE plugin for theme you are using ? plz tell
I've used the Midnight Synth in this video
Whenever i am trying to import any mongoDB connection file or other mango file into next.js component pages its throwing error "Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'split')" . even in console i am getting the data using getServerSideProps but at UI this error is showing
The data you are getting is an array right? Try not using the split method in the UI and use JSON.stringify(array) and just render it like that.
Also reply with the component code where the error occurs
@@MaxProgramming I am not usi g any split method on the array coming from response, i double checked the code
i am not sure its a package issue or something else
@@niteshtak8484 Okay so
1. Try rendering the array with JSON.stringify(array)
2. Show me the code where the error occurs. You might see the line number on the right of the error.
Also is the error occurring in the browser or the terminal?
@@MaxProgramming thats the issue the error and the line no is not showing in console nor in server side but the main things is that only doing import of mongo file in next app throwing error.. i cant share the code .. it seems weird for me also
@@niteshtak8484 Can you open chat.google.com and message me on maxprogramming05@gmail.com?
Great video, please how do you perform the DELETE operation. I tried this:
async function Remove(req, res) {
await connectDB()
await FacebookModel.deleteOne({_id: req.params.id},
function (err) {
if (err) {
console.log(err)
}
res.send("Deleted")
})
and pass the _id as /api/remove/${_id} but I got 404 error when click the deletebutton I made.
Did you create a folder with square brackets to make this work?
You have to create a folder like this
my-app/
├─ pages/
│ ├─ api/
│ │ ├─ remove/
│ │ │ ├─ [id].js
And once that part is done, you can get the particular id from the req URL using req.query.id
Read more here on NextJS docs
nextjs.org/docs/api-routes/dynamic-api-routes
Thanks, I got it fixed.
What VS code theme are you using?
Midnight Synth.
I specify the theme in the description of the video
no need to close connection ?
Honestly, that is something I didn't take care of while making the video. But thanks for pointing out!
Do you have the github for this code?
As of now, I don't. Let me know and I'll put that
@@MaxProgramming Oh yes, if you have it, it would be very useful... thanks..
Hi Usman, can you explain how I can get "authorization" from "req.header" in Next.js, For example:
I want to destruct "authorization" from "req.headers" Something like this
const { authorization } = req.headers
But I am getting an error:
TypeError: Cannot read properties of undefined (reading 'headers')
> 7 | const { authorization } = req.headers
| ^
Thank you :)
This particular error means that "req" is undefined. Check the variable naming. Maybe that's different in your code. Or reply me the with the code
(0 , _mongoose.model) is not a function "This error is blown my mind" please help
1. Try restarting the server
2. If that doesn't work, reply with your import code and the line where you used mongoose.model
i had the same problem. i just pasted the function into the add.js file.
export default async function handler(req, res) {
console.log('connecting');
await mongoose.connect(process.env.URI)
console.log('connected');
const test = await Test.create(req.body)
res.json({test})
}
Does anyone have a solution for this
OverwriteModelError: Cannot overwrite `Text` model once compiled.
19 |
> 20 | const Test = models.Test || mongoose.model('Text', dbSchema)
| ^
21 |
22 | export default Test
Thank you in Advance
Because in mongoose.model() you wrote *Text* and the other places you have *Test*. Change the Text inside mongoose.model to Test
been getting an error that points to my model
__
Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'get')
Source
models\Flashcard.js (2:24) @ eval
1 | import { Schema, model, models } from "mongoose"
> 2 | const FlashcardSchema = new Schema({
| ^
__
anyone ever see this error?
Can you share your code in the reply? Your Flashcard.js file code?
@@MaxProgramming
import mongoose from 'mongoose';
const FlashcardSchema = new mongoose.Schema({
question: {
type: String,
required: true,
},
user: {
type: mongoose.Schema.Types.ObjectId,
ref: "User"
},
answer:{
type: String,
required: true,
},
image:{
type: String,
},
cloudinaryId:{
type: String
},
topic:{
type: String,
}
},{ timestamps: true })
export default mongoose.models.Flashcard || mongoose.model('Flashcard', FlashcardSchema)
Hey man, could You help me a little bit? I am just following the video and when I try to send post request I get this error
CONNECTING TO MONGO
MongooseError: The `uri` parameter to `openUri()` must be a string, got "undefined". Make sure the first parameter to `mongoose.connect()` or `mongoose.createConnection()` is a string.
Thanks
edit: if someone has this error, go to MongoDB and add new IP whitelist- add 0.0.0.0/0
Glad you fixed it.
But also finally when you use it for production, make sure to only whitelist *some IP addresses* . The one you whitelisted means everyone can access the database if they have the connection string 👍
@@MaxProgramming Okey, will do! Thank you for amazing tutorial. It's pretty straight forward unlike other tutorials on youtube. Cheers!
@@Renato-fh2ez Are you connecting to mongodb and fetching with the model in the react component?
You can only fetch data from MongoDB or any database in the API routes. And then call those API routes from your react components
Where I can get this code. Do u have a GitHub repo
Sorry I forgot. I'll push the code to GitHub and reply
Here's the GitHub repo: github.com/max-programming/mongoose-with-nextjs
@@MaxProgrammingpage not found☹️
Try again. It's not private it's already public
it can be implemented dynamic model acces with using model.DynamicNameVariable ?
If you want to make dynamic models, you can't just use model.DynamicNameVariable, if you have a variable that you want to use in this case you have to go with model[DynamicNameVariable]
@@MaxProgramming Thanks for the answer i tried to
const Metadata = mongoose.model[`${req.query.collectionAdd}metadata`]
it gaveme error : The 2nd parameter to `mongoose.model()` should be a schema
Could you give me further details
@@goosebosluk9573 actually my answer was about the models.Name. *model* is a function. I'll let you know about this soon
@@goosebosluk9573
model("NAME", Schema)
do you want to have the NAME dynamic or do you want to pass in a dynamic schema?
@@MaxProgramming Actually i want to dynamic NAME schema is static
Thank you so much!! You are a life saver!
I was stuck with mongoose.model() and found your article. I hope you are safe and sound
Happy to see you got it done 😄
And How does it work with new app experimental?
You can still use pages/api folder to define custom API Routes and write server side code there.
However there's no getStaticProps, getServerSideProps in the app directory anymore so you can just DIRECTLY fetch data in a page component (by making the page async).
The only condition is you can't run client side code on that page. You have to create a different component with 'use client' on top
@@MaxProgramming I would like to use new features, that promise to improve the workflow.
Yes and if you don't want to use the pages/api routes, Next 13 introduced Route Handlers instead of API Routes
beta.nextjs.org/docs/routing/route-handlers
@@MaxProgramming I can not understand how this all is used completely...starting from the mongo database until I get the data rendered on the page. Docs for me look like those written for advanced users of next.
@ I guess you might be familiar with Mongoose/MongoDB but aren't with Next. I'd say right now don't use the Next app folder and stick with normal pages folder ☺️
Also Next 13 app folder is not stable yet. It has HUGE problems too so it's better to use the pages folder to atleast get used to Next first.
Let me know if you want a video on a specific topic on NextJS and I'll be more than happy to make a video