I did this course with a Flask Backend, a PostgreSQL database and I then dockerized it Am really proud of what I learnt and I really appreciate you for helping in my journey ❤🎉
[00:02]emonstrating CRUD operations on MongoDB with a Next.js application. [02:06] Operations in MongoDB include adding, reading, updating, and removing data. [06:37] Adding styles to the layout using Tailwind CSS [08:49] Designing the topics list component with topic title, description, and buttons. [13:22] Creating an 'add topic' page with Next.js and linking it properly. [15:31] Creating add topic and edit topic pages [19:42] Setting up environment variables and database connection [21:44] Creating a connection to MongoDB and setting up a model structure. [25:58] Connecting to MongoDB and creating a topic in the CRUD app. [28:06] Creating and testing a CRUD app with Next.js and MongoDB [32:36] Create a dynamic route for update operation [34:54] Using the PUT method to update data in the MongoDB CRUD app. [39:11] Fetching topic title and description from MongoDB collection. [41:11] Creating a Next.js CRUD app with MongoDB. [45:31] Transforming server component to client component and setting up data state [47:35] Handle form submission and data validation [51:52] Implementing a confirmation prompt and sending the ID for topic deletion. [54:06] Demonstration of topic deletion and automatic page refresh [58:13] Updating data without caching and handling errors while fetching data. [1:00:24] Handling form submission and updating data using Next.js and MongoDB [1:04:52] Encouraging audience interaction and engagement
this is the best tutorial ever on youtube, i learned so much, i do this tutorial every single time i forget how to do something in react and that could be anything because this tutorial covers alot without effort
this is the just minimum of what i needed. beautifully done. this very one tutorial is the kind of tutorials that gets you out of tutorial hell syndrom very fast. it is so straightforward
Thank you so much. I was getting confused with this, tried different tutorials on YT which only served to get me even more confused, and yours got me unstuck and made complete sense sense :) SImple and to the point. Finally I have something that works and I can move on!
00:02 Demonstrating CRUD operations on MongoDB with a Next.js application. 02:06 Operations in MongoDB include adding, reading, updating, and removing data. 06:37 Adding styles to the layout using Tailwind CSS 08:49 Designing the topics list component with topic title, description, and buttons. 13:22 Creating an 'add topic' page with Next.js and linking it properly. 15:31 Creating add topic and edit topic pages 19:42 Setting up environment variables and database connection 21:44 Creating a connection to MongoDB and setting up a model structure. 25:58 Connecting to MongoDB and creating a topic in the CRUD app. 28:06 Creating and testing a CRUD app with Next.js and MongoDB 32:36 Create a dynamic route for update operation 34:54 Using the PUT method to update data in the MongoDB CRUD app. 39:11 Fetching topic title and description from MongoDB collection. 41:11 Creating a Next.js CRUD app with MongoDB. 45:31 Transforming server component to client component and setting up data state 47:35 Handle form submission and data validation 51:52 Implementing a confirmation prompt and sending the ID for topic deletion. 54:06 Demonstration of topic deletion and automatic page refresh 58:13 Updating data without caching and handling errors while fetching data. 1:00:24 Handling form submission and updating data using Next.js and MongoDB 1:04:52 Encouraging audience interaction and engagement Crafted by Merlin AI.
Great and very helpful tutorial...Just a quick note, in addTopic page, we can use router.replace("/") instead router.push(/) to auto refresh the routed page ..thanks so much
This is the best tutorial on NextJS I found on the internet. I love the way you explain things, while keeping it simple. This channel will become very popular in the future. I have one request, please make a tutorial on how to use MaterialUI with NextJS.
I struggled for a good week to connect with my MongoDB but you made it easy and very didactic, thank you for your time and knowledge, this video is Goooold 💰
calling "await connectMongoDB()" on each request is not a good idea. There should be something, so that, It should be called once only, whenever project starts and every request should rely on to that. What do you think. Else everything is good and concise. Really helpful to me. Thanks
@@AbdulMoiz-q7x in that case you can have a flag and assign to connection function in the beginning of the route and check if flag is true while performing db operations.
Why this app is not working on "npm run build" but its working on "npm run dev"? I guess its trying to generate static pages but the app is dynamic how do i fix it
Very helpful, as the information provided was clearly explained & demonstrated. From a blank page up to a fully functional App. The main issue would be there is SO MUCH information you'll probably end up dipping in to parts of the video again & again to extract all the value this provides
Thank you for the quality of the tutorial. I use it to set up a practical session for a class of young developers. Everything is there: the good practices, the sequencing of the workflow, the clarity of the words and even the accent which allows young Frenchies to better understand the language of our neighbors, members of the "Perfidious Albion". I'm not going to let you go anytime soon and continue to follow you. Thanks again.
@@GTCodingAfter adding the option to include a parent category, I am unable to add a category without a parent. When I attempt to do so, I encounter the following error: ⨯ Error: Category validation failed: parent: Cast to ObjectId failed for value "" (type string) at path "parent" because of "BSONError" can you help me
Something that I have learnt without understanding a line, you just made it so easy like 'abc', thankyou very much for this amazing teaching technique. I must request a video on how I can upload images and text content to Cloudinary & MongoDB. Thank you so much
For those having issues after the minute 40, try the following on the page.jsx: import { useState, useEffect } from 'react' export default function TopicsList() { const [topics, setTopics] = useState(null) const [isLoading, setLoading] = useState(true) useEffect(() => { fetch('api/topics') .then((res) => res.json()) .then((topics) => { setTopics(topics) setLoading(false) }) }, []) if (isLoading) return Loading... if (!topics) return No profile data return ( {topics && topics.map((t) => (
'Thunder Client' extension for VsCode is a suitable replacement for Postman in this tutorial. It was necessary for me due to my organization blocking exe downloads
Thanks for the vid. But router.refresh(); this doesnt automatically refresh the page after updating or adding something. I have to manually refresh to view the updated data. Any suggestion on how do I solve it?
Congrats on this great video. You were concise and easy to follow and understand from start to finish. Being a junior I appreciate this teaching style a lot. Thank you!
thank you man u helped me a lot !!!! learnt many things from building this project even though i dont know Next Js💯💯❤🔥❤🔥❤🔥❤🔥😃😊 dont stop making videos
When I run build command in an error occurs: TypeError: Cannot destructure property 'topics' of '(intermediate value)' as it is undefined. at TopicList (E: ext_todoapp\.next\server\app\page.js:349:13) Please help me to resolve this problem. I will be indebted.
Thank you very much! I learned a lot from you. I really appreciate how you follow a flow and I am able to comprehend every step. I appreciate you working hard making this video for us to learn. I hope you will continue to do this amazing work and have major success in your life. You are a good man and you should be proud of yourself for doing such an amazing job. I wish you nothing but the best.
If your PUT isn't working, it might be because you're still using ?id=[post_id] at the end of your URL instead of /[post-id]. That's what happened to me. Hopefully this saves someone else the headaches I had to endure.
@@shreedharpatil1710 I've have solution, in mongodbURI in I'd insert password in but the right way is put password instead and delete . And the request is 201
may be this is 1 hour video but i took 3 hours to learn i shifting my carrier to js from python ... will come back soon as i create complex project i will come and post in replay section
Thank you very much for the lesson. "addTopic" how could we fetch this page even though it is use client. Aren't fetch operations in Nextjs also in Server Components?
So a fix I found was instead of passing things to the component from the page. Do it on the component instead. However it won't allow you to use async await in the client components so use the .then
1:03:51 I almost finished it but I got an error when I want to update the data. It says "Failed to fetch" and I check the console on chrome and highlighted the fetch('...') so it must have a problem from the api/topics/[id] and I have checked it multiple times on your video and everything is the same because I copied it everything but still there's got error. So, yeah can you help me?
Dear Sir, your video is nice butt please create project next.js 13.4 with MongoDB small and simple only title, description, category or image post or add and display or other page video post or display or signup or sign in page protected page in an easy and simple way no involve css work just development work
hey. having issues with the project. can't seem to get the values of 'topics' for editing topics. i believe it is due to updates to nextjs. can you kindly help me out with it?
In a production environment such as Vercel, what do I write instead of localhost:3000 in order to access my task list? I can call my mongoose models directly but wouldn't that beat the purpose of fetching from a local api?
Hello there. Thank you so much for this tutorial. I have been looking for such simple yet great-for-progression tutorial. I love how you not only show but also describe each step and why it's required. BUT I am stuck at 43:37 because I can't get items to display in "TopicsList" component, even though GET requests are working fine when sent from Postman. It may have something to do with the fact that some component is client side and other one is server-side, but idk. When trying to run the source code from your github I am getting an error "Unhandled Runtime Error. Error: Cannot destructure property 'topics' of '(intermediate value)' as it is undefined." If you have a fix to that - please reply 🙏
@@Md.AbuSalehNasim I had to use this await connectMongodb(); return await Topic.find(); instead of the first fetch method in the TopicsList compoent I also had to remove the curly braces then had to use a different api route
go to app > api > route.js and under GET function check if u have this line correct "const topics = await Topic.find()" since u are destructuring that "topics" in TopicsList if u are not sure what is it returning, try console logging the data in TopicsList.... ie: const data = await getTodos() and just write return keyword after it so u dont get any errors, and then check your terminal since its server component, it should return object with topics array containing all topics objects. that topics array is what u are destructuring and then mapping through. I hope that helps
this problem comes due to the MongoDB database automatically disconnected please make sure the database is connected and try it again. Once restarted the server is chacked again
in the component TopicsList for some reason I keep getting this error after copying exactly whats on github Error: Cannot destructure property 'topics' of '(intermediate value)' as it is undefined.
one question, making a connection to the database continuously per query, will not generate an overload of connections in your mongo DB, that is not bad? Other than that, very good video by the way : )
I want to know why DELETE use const id = request.nextUrl.searchParams.get("id"); in route.js but PUT use export async function PUT(request, { params }) in [id[/route.js both of them need id to send request , what are the difference? thanks
This is great, but I have a similar app. When i deployed it, I'm getting 503 gateway error sometimes when fetching data. What's the complete setup so I don't get a 503 gateway errors
hey, your video really helped me but it also left me with one question. I tried to use the entire mongoose code (connecting, schema, creating collection) at the client side of the next js project and it didn't worked. I only managed to create a empty collection with the name i specified in the code, other than that It failed to create documents. Why did this happen? does mongoose only work at the server side ?
00:40 The UI
18:27 The Backend
- 29:34 GET method
38:43 connecting the Backend to Frontend
i was searching for this my brother
I have just one request, please don't stop making tutorials like this. Very helpful. Much thanks!
Thanks. More to come!
I did this course with a Flask Backend, a PostgreSQL database and I then dockerized it
Am really proud of what I learnt and I really appreciate you for helping in my journey ❤🎉
[00:02]emonstrating CRUD operations on MongoDB with a Next.js application.
[02:06] Operations in MongoDB include adding, reading, updating, and removing data.
[06:37] Adding styles to the layout using Tailwind CSS
[08:49] Designing the topics list component with topic title, description, and buttons.
[13:22] Creating an 'add topic' page with Next.js and linking it properly.
[15:31] Creating add topic and edit topic pages
[19:42] Setting up environment variables and database connection
[21:44] Creating a connection to MongoDB and setting up a model structure.
[25:58] Connecting to MongoDB and creating a topic in the CRUD app.
[28:06] Creating and testing a CRUD app with Next.js and MongoDB
[32:36] Create a dynamic route for update operation
[34:54] Using the PUT method to update data in the MongoDB CRUD app.
[39:11] Fetching topic title and description from MongoDB collection.
[41:11] Creating a Next.js CRUD app with MongoDB.
[45:31] Transforming server component to client component and setting up data state
[47:35] Handle form submission and data validation
[51:52] Implementing a confirmation prompt and sending the ID for topic deletion.
[54:06] Demonstration of topic deletion and automatic page refresh
[58:13] Updating data without caching and handling errors while fetching data.
[1:00:24] Handling form submission and updating data using Next.js and MongoDB
[1:04:52] Encouraging audience interaction and engagement
Did you use AI to create this? Just curious
@@thomasdinh2k yes ! and its Merlin Chrome Extension
@@HarshSingh-kr2ci looks so cool, does it free though?
@@thomasdinh2k yes bro
this is the best tutorial ever on youtube, i learned so much, i do this tutorial every single time i forget how to do something in react and that could be anything because this tutorial covers alot without effort
Perfect tutorial! Years of learning material are condensed into this hour, ideal for rewatching and learning many times over
I built along with you. My first Full stack next.js app. Thanks man!
this is the just minimum of what i needed. beautifully done. this very one tutorial is the kind of tutorials that gets you out of tutorial hell syndrom very fast. it is so straightforward
Thank you so much. I was getting confused with this, tried different tutorials on YT which only served to get me even more confused, and yours got me unstuck and made complete sense sense :) SImple and to the point. Finally I have something that works and I can move on!
00:02 Demonstrating CRUD operations on MongoDB with a Next.js application.
02:06 Operations in MongoDB include adding, reading, updating, and removing data.
06:37 Adding styles to the layout using Tailwind CSS
08:49 Designing the topics list component with topic title, description, and buttons.
13:22 Creating an 'add topic' page with Next.js and linking it properly.
15:31 Creating add topic and edit topic pages
19:42 Setting up environment variables and database connection
21:44 Creating a connection to MongoDB and setting up a model structure.
25:58 Connecting to MongoDB and creating a topic in the CRUD app.
28:06 Creating and testing a CRUD app with Next.js and MongoDB
32:36 Create a dynamic route for update operation
34:54 Using the PUT method to update data in the MongoDB CRUD app.
39:11 Fetching topic title and description from MongoDB collection.
41:11 Creating a Next.js CRUD app with MongoDB.
45:31 Transforming server component to client component and setting up data state
47:35 Handle form submission and data validation
51:52 Implementing a confirmation prompt and sending the ID for topic deletion.
54:06 Demonstration of topic deletion and automatic page refresh
58:13 Updating data without caching and handling errors while fetching data.
1:00:24 Handling form submission and updating data using Next.js and MongoDB
1:04:52 Encouraging audience interaction and engagement
Crafted by Merlin AI.
Great and very helpful tutorial...Just a quick note, in addTopic page, we can use router.replace("/") instead router.push(/) to auto refresh the routed page ..thanks so much
not working any other solution
This is the best tutorial on NextJS I found on the internet. I love the way you explain things, while keeping it simple. This channel will become very popular in the future.
I have one request, please make a tutorial on how to use MaterialUI with NextJS.
I struggled for a good week to connect with my MongoDB but you made it easy and very didactic, thank you for your time and knowledge, this video is Goooold 💰
Same 4 me 😅
Such a comprehensive to the point tutorial just what I was looking for, thanks 🙏🏽
Man i was so sceptical when i started watching this video but man i was wrong not watching it sooner this is just amazing thank you so much
Thank you🙏 Finally a tutorial that explains API in Next.js clearly. Simple and concise
calling "await connectMongoDB()" on each request is not a good idea. There should be something, so that, It should be called once only, whenever project starts and every request should rely on to that. What do you think. Else everything is good and concise. Really helpful to me. Thanks
You just have to call it in the beginning of the routes and that's it , I called mine in the beginning of the routes file before each function
Exactly is there any way to connect database once
But if there is any run time error occurs then how we resolve it? Connect lose or any related problem to the mongo db connection? Answer please
@@AbdulMoiz-q7x in that case you can have a flag and assign to connection function in the beginning of the route and check if flag is true while performing db operations.
Why this app is not working on "npm run build" but its working on "npm run dev"? I guess its trying to generate static pages but the app is dynamic how do i fix it
Very helpful, as the information provided was clearly explained & demonstrated. From a blank page up to a fully functional App.
The main issue would be there is SO MUCH information you'll probably end up dipping in to parts of the video again & again to extract all the value this provides
Thank you for the quality of the tutorial. I use it to set up a practical session for a class of young developers. Everything is there: the good practices, the sequencing of the workflow, the clarity of the words and even the accent which allows young Frenchies to better understand the language of our neighbors, members of the "Perfidious Albion". I'm not going to let you go anytime soon and continue to follow you. Thanks again.
Glad it was helpful!
@@GTCodingAfter adding the option to include a parent category, I am unable to add a category without a parent. When I attempt to do so, I encounter the following error:
⨯ Error: Category validation failed: parent: Cast to ObjectId failed for value "" (type string) at path "parent" because of "BSONError"
can you help me
i solve it hh
if(method === 'POST'){
const {name,parentCategory} =req.body;
const categoryDoc = await Category.create({name , parent:parentCategory||null});
res.json(categoryDoc);
}
/////////////////////
import mongoose, {Schema,model, models} from "mongoose"
const CategorySchema = new Schema({
name:{type:String , require: true},
parent:{type:mongoose.Types.ObjectId, ref:'Category',default:null},
})
export const Category = models?.Category || model('Category',CategorySchema)
Good job boss.. I followed and completed this project successfully.
terima kasih, ini adalah tutorial yang saya cari selama ini, sesuai dengan apa yang saya butuhkan! TERIMA KASIH BANYAK salam dari INDONESIA
This video is enough to understand crud in next js in very simple way.
I took down notes all the codes you taught here. Now I can build my own apps with this. Thank you so much!
A nice example that help me learning the Next.js much better
Ola Mestre, sou do Brasil e quero agradecer por compartilhar seu conhecimento, simples e eficiente, thank you !!!!
Verdade!!!
Something that I have learnt without understanding a line, you just made it so easy like 'abc', thankyou very much for this amazing teaching technique. I must request a video on how I can upload images and text content to Cloudinary & MongoDB. Thank you so much
For those having issues after the minute 40, try the following on the page.jsx:
import { useState, useEffect } from 'react'
export default function TopicsList() {
const [topics, setTopics] = useState(null)
const [isLoading, setLoading] = useState(true)
useEffect(() => {
fetch('api/topics')
.then((res) => res.json())
.then((topics) => {
setTopics(topics)
setLoading(false)
})
}, [])
if (isLoading) return Loading...
if (!topics) return No profile data
return (
{topics && topics.map((t) => (
I have completed this tutorial and it was awesome expericence. Learned all the basics of Next.js. Thank you
Great to hear!
Simple, didactic and straightforward. Excellent tutorial!
Your teaching style is very clear and straightforward. I really appreciate it. ❤❤
Thank you, This amazing toturial help people to put their raw knowledges on test and start their journey.
This video is really helpful and easy to understand... Thank you for uploading!!!
Wow, very clear... direct to the point...
The tutorial is detailed and complete in all sense. Love it.
Awesome video! Very well explained. I created it using TypeScript. Thanks!
'Thunder Client' extension for VsCode is a suitable replacement for Postman in this tutorial. It was necessary for me due to my organization blocking exe downloads
Thanks for the vid. But router.refresh(); this doesnt automatically refresh the page after updating or adding something. I have to manually refresh to view the updated data. Any suggestion on how do I solve it?
Thank you very much bro, I learned a lot with this tutorial, greets from Brazil!
Congrats on this great video. You were concise and easy to follow and understand from start to finish. Being a junior I appreciate this teaching style a lot. Thank you!
Great information about next js 13 and 14 with the new route handler. Great stuff. Thanks.
Really concept full video. I got a strong concept of API methods how they are working. Amazing bro Great Explanation❤❤❤❤
thank you man u helped me a lot !!!! learnt many things from building this project even though i dont know Next Js💯💯❤🔥❤🔥❤🔥❤🔥😃😊 dont stop making videos
One of the best videos on the topic. 👍
Nice explanation and very good for the beginner. Thanks
Thank you, now you are my teacher!
When I run build command in an error occurs:
TypeError: Cannot destructure property 'topics' of '(intermediate value)' as it is undefined.
at TopicList (E:
ext_todoapp\.next\server\app\page.js:349:13)
Please help me to resolve this problem. I will be indebted.
hey did u find the solution to this problem , if yes please reply me and tell me how to fix that error
No I couldn't find it. Someone suggested to use Axios instead of fetch method, I tried but it didn't work.
Same problem here
Trycatch statements are not available for server components.
Next.js seems to judge error.tsx as a client component by default.
Really this a great tutorial to learn more about this framework, thanks very much
Thank you So much brother.
Love From India 😀
did you deploy?
Clean and very straight forward. Thanks
Great one for understanding api routes for NEXT js 13.4 above. Thanks.
Very nice video! Your didatics are so good, keep it up man!
this really helps me learn js next
thank you! it's simple & easy to follow.
Such a nicely explained video, thank you so much for this 👏👏
This is a great tutorial for beginners!
Thank you very much! I learned a lot from you. I really appreciate how you follow a flow and I am able to comprehend every step. I appreciate you working hard making this video for us to learn. I hope you will continue to do this amazing work and have major success in your life. You are a good man and you should be proud of yourself for doing such an amazing job. I wish you nothing but the best.
Thanks you so much for the clear and well explained tutorial
Thank you !! The tutorial was wonderful and easy to follow ^^
Great Tutorial. Thank you so much!
I recommend showing us how to add pagination
Thank you, simple Nice explanation.
Excellent tutorial mate! Your teaching style and voice reminds me of Mumshad Mannambeth of KodeCloud.
Does this require the knowledge of mongodb before doin this tutorial?
If your PUT isn't working, it might be because you're still using ?id=[post_id] at the end of your URL instead of /[post-id]. That's what happened to me. Hopefully this saves someone else the headaches I had to endure.
Thank u So Much
This is a great tutorial, glad I came across this video.
29:00 in my postman I have 500 internal server error, what's problem?
Same issue
@@shreedharpatil1710 I've have solution, in mongodbURI in I'd insert password in but the right way is put password instead and delete . And the request is 201
Could you make a video securing the APi with a key or authentication?
Excellent Course Sir
did you submit?
Pretty good stuff! I was able to create a nice CRUD. Thanks!
thank you very well
from moroco
may be this is 1 hour video but i took 3 hours to learn i shifting my carrier to js from python ... will come back soon as i create complex project i will come and post in
replay section
Well Explained and consized 👍
This was helpful. Thank you brother
Everything is fine. But, is that correct way router.refresh() after I create or update?
I just used use effect so TopicsList is always fetched anew on page load
Thank you very much for the lesson. "addTopic" how could we fetch this page even though it is use client. Aren't fetch operations in Nextjs also in Server Components?
TypeError: Cannot destructure property 'topic' of '(intermediate value)' as it is undefined. I have a problem getting topic by id please help
i have the same problem, did you solve?
Same here. Thats strange
same
So a fix I found was instead of passing things to the component from the page. Do it on the component instead. However it won't allow you to use async await in the client components so use the
.then
This is not a good solution but it's what I found and I wasted hours on this. 😂
If a user now types /api/get for example in the address will it open a json view of the result?
1:03:51 I almost finished it but I got an error when I want to update the data. It says "Failed to fetch" and I check the console on chrome and highlighted the fetch('...') so it must have a problem from the api/topics/[id] and I have checked it multiple times on your video and everything is the same because I copied it everything but still there's got error. So, yeah can you help me?
Is it necessary to try/catch on these operations from the backend?
Dear Sir, your video is nice butt please create project next.js 13.4 with MongoDB small and simple only title, description, category or image post or add and display or other page video post or display or signup or sign in page protected page in an easy and simple way no involve css work just development work
Excellent, thank you very much...
at 30.20 method GET in my postman I have 500 internal server error, what's problem?
postman is show message : "Internal Server Error "
@@bababa4439 same here, did you solve it
same here
43:00 - (topics . map) is returning an error, even if I clone your repository. It says topic is undefined. Please help.
hey. having issues with the project. can't seem to get the values of 'topics' for editing topics. i believe it is due to updates to nextjs. can you kindly help me out with it?
10/10 guide thank you so much
You are the guy!!! thanks a lot bro.
only one thing to say. can the folder structure be more compact
In a production environment such as Vercel, what do I write instead of localhost:3000 in order to access my task list? I can call my mongoose models directly but wouldn't that beat the purpose of fetching from a local api?
Hi, I have the same question. Did you find any solution for it?
same question
Wo very helpful great project❤❤ I have learned so much🎉
Hello there. Thank you so much for this tutorial. I have been looking for such simple yet great-for-progression tutorial. I love how you not only show but also describe each step and why it's required.
BUT I am stuck at 43:37 because I can't get items to display in "TopicsList" component, even though GET requests are working fine when sent from Postman. It may have something to do with the fact that some component is client side and other one is server-side, but idk.
When trying to run the source code from your github I am getting an error "Unhandled Runtime Error. Error: Cannot destructure property 'topics' of '(intermediate value)' as it is undefined."
If you have a fix to that - please reply 🙏
I am also facing the same issue. If you find any solutions, please let me know
@@Md.AbuSalehNasim I had to use this await connectMongodb();
return await Topic.find(); instead of the first fetch method in the TopicsList compoent
I also had to remove the curly braces then had to use a different api route
brother have u fixed it?
go to app > api > route.js and under GET function check if u have this line correct "const topics = await Topic.find()" since u are destructuring that "topics" in TopicsList if u are not sure what is it returning, try console logging the data in TopicsList.... ie: const data = await getTodos() and just write return keyword after it so u dont get any errors, and then check your terminal since its server component, it should return object with topics array containing all topics objects. that topics array is what u are destructuring and then mapping through.
I hope that helps
this problem comes due to the MongoDB database automatically disconnected please make sure the database is connected and try it again. Once restarted the server is chacked again
in the component TopicsList for some reason I keep getting this error after copying exactly whats on github
Error: Cannot destructure property 'topics' of '(intermediate value)' as it is undefined.
Great tutorial 🏆
Thank you very much for the Tutorial. Can you make a video on how to deploy it to Vercel or Netlify ?
Ok, I will add it to my to-do list.
one question, making a connection to the database continuously per query, will not generate an overload of connections in your mongo DB, that is not bad?
Other than that, very good video by the way : )
I want to know why DELETE use
const id = request.nextUrl.searchParams.get("id");
in route.js
but PUT use
export async function PUT(request, { params })
in [id[/route.js
both of them need id to send request , what are the difference?
thanks
This is great, but I have a similar app. When i deployed it, I'm getting 503 gateway error sometimes when fetching data. What's the complete setup so I don't get a 503 gateway errors
thank you so much.
however, i got fetch fail when deploy to vercel can someone help me.
When I try to host it on vercel it doesnt work should I have to change the link inside fetch to i mean the localhost to another online link
hey, your video really helped me but it also left me with one question. I tried to use the entire mongoose code (connecting, schema, creating collection) at the client side of the next js project and it didn't worked. I only managed to create a empty collection with the name i specified in the code, other than that It failed to create documents. Why did this happen? does mongoose only work at the server side ?