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 ❤🎉
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!
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 💰
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
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
[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
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
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
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
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.
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.
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?
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
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.
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 : )
@@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
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
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?
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?
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.
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
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