[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
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 ❤🎉
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 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
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
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) => (
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
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
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
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
@@user-hn1jr3fo4t 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
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 man u helped me a lot !!!! learnt many things from building this project even though i dont know Next Js💯💯❤🔥❤🔥❤🔥❤🔥😃😊 dont stop making videos
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 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.
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
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?
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.
@@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
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
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?
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?
Thank you for the course ! I;m stunning on a bug some how that after I add a new Topic with my POST route that I have to refresh the page before the item is showed that there is added a new topic. any one else have the samen problem, or am I the only one.
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.
course is really good i learn a lot but getting stuck in issue as when i update topic then when come back to "/" route/page not getting data as per updation instead old data shown in "/" page same thing happend when i add topic and get back to list then newly added topic did not shown
so with the newest version of the app router there might be a .map error. So I had to use: await connectMongodb(); return await Topic.find(); to fix it. Just curious why it wanted me to that instead of the first way.
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
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
I have just one request, please don't stop making tutorials like this. Very helpful. Much thanks!
Thanks. More to come!
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
[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
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 ❤🎉
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 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
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 😅
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
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
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) => (
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
I built along with you. My first Full stack next.js app. Thanks man!
I took down notes all the codes you taught here. Now I can build my own apps with this. Thank you so much!
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
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)
Ola Mestre, sou do Brasil e quero agradecer por compartilhar seu conhecimento, simples e eficiente, thank you !!!!
Verdade!!!
This video is enough to understand crud in next js in very simple way.
terima kasih, ini adalah tutorial yang saya cari selama ini, sesuai dengan apa yang saya butuhkan! TERIMA KASIH BANYAK salam dari INDONESIA
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
@@user-hn1jr3fo4t 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
Simple, didactic and straightforward. Excellent tutorial!
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.
Fantastic tutorial. I really appreciated how you tested with Postman.
Awesome video! Very well explained. I created it using TypeScript. Thanks!
Thank you, now you are my teacher!
A nice example that help me learning the Next.js much better
I have completed this tutorial and it was awesome expericence. Learned all the basics of Next.js. Thank you
Great to hear!
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
Thank you, This amazing toturial help people to put their raw knowledges on test and start their journey.
Great information about next js 13 and 14 with the new route handler. Great stuff. Thanks.
Your teaching style is very clear and straightforward. I really appreciate 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 very much bro, I learned a lot with this tutorial, greets from Brazil!
The tutorial is detailed and complete in all sense. Love it.
Really this a great tutorial to learn more about this framework, thanks very much
Very nice video! Your didatics are so good, keep it up man!
Really concept full video. I got a strong concept of API methods how they are working. Amazing bro Great Explanation❤❤❤❤
One of the best videos on the topic. 👍
Thank you, simple Nice explanation.
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.
Thank you !! The tutorial was wonderful and easy to follow ^^
Excellent, thank you very much...
Clean and very straight forward. Thanks
Nice explanation and very good for the beginner. Thanks
This is a great tutorial for beginners!
Great Tutorial. Thank you so much!
Great one for understanding api routes for NEXT js 13.4 above. Thanks.
Thank you So much brother.
Love From India 😀
did you deploy?
Such a nicely explained video, thank you so much for this 👏👏
thank you very well
from moroco
Excellent tutorial mate! Your teaching style and voice reminds me of Mumshad Mannambeth of KodeCloud.
Thanks you so much for the clear and well explained tutorial
This is a great tutorial, glad I came across this video.
thank you! it's simple & easy to follow.
Pretty good stuff! I was able to create a nice CRUD. Thanks!
this really helps me learn js next
Thanks for this one
You are the guy!!! thanks a lot bro.
Well Explained and consized 👍
This was helpful. Thank you brother
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
10/10 guide thank you so much
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?
Wo very helpful great project❤❤ I have learned so much🎉
Excellent!
Great tutorial 🏆
Excellent Course Sir
did you submit?
Simple and Perfect!!!😍
I recommend showing us how to add pagination
Thanks for this great video.
Thank you! Great efforts
Thank you.
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.
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
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
Thank you very much!
Tq helped me a lot
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
Thanks
Vaiya
Thank you
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
I am facing issues in the get api in TopicList component
When I fetch data then it render 1 mongodb documents data 2 times. Is there anyone who can solve my problem?
everything is working well but nothing is rendering in my DOM
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?
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?
Thank you for the course ! I;m stunning on a bug some how that after I add a new Topic with my POST route that I have to refresh the page before the item is showed that there is added a new topic.
any one else have the samen problem, or am I the only one.
Bru whenn u want to add topic i can add it but i must to refresh to show it
Same, but in the video there´s no need to refresh! Can somebody help?
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
This is nice turtorial, thank you for this video. and i subcribled your chanel.
did you deploy?
Could you make a video securing the APi with a key or authentication?
course is really good i learn a lot
but getting stuck in issue as when i update topic then when come back to "/" route/page not getting data as per updation instead old data shown in "/" page same thing happend when i add topic and get back to list then newly added topic did not shown
For that I just used use effect so TopicsList is always fetched anew on page load
thanks
so with the newest version of the app router there might be a .map error. So I had to use: await connectMongodb();
return await Topic.find(); to fix it. Just curious why it wanted me to that instead of the first way.
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
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
I am getting buffering timeout 10000 error . Please help me
Thank you so mush.