Тёмный

Step-by-Step Guide: Create a Next.js 13 CRUD App with MongoDB from Scratch 

GTCoding
Подписаться 41 тыс.
Просмотров 140 тыс.
50% 1

Опубликовано:

 

30 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 272   
@arisudana3672
@arisudana3672 Год назад
I have just one request, please don't stop making tutorials like this. Very helpful. Much thanks!
@GTCoding
@GTCoding Год назад
Thanks. More to come!
@cooktim6613
@cooktim6613 Год назад
00:40 The UI 18:27 The Backend - 29:34 GET method 38:43 connecting the Backend to Frontend
@iliasi.4004
@iliasi.4004 6 месяцев назад
i was searching for this my brother
@judevector
@judevector 9 месяцев назад
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 ❤🎉
@antwarior
@antwarior 3 месяца назад
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
@yesfredfredburger8008
@yesfredfredburger8008 28 дней назад
Perfect tutorial! Years of learning material are condensed into this hour, ideal for rewatching and learning many times over
@ExclisiveArt
@ExclisiveArt Год назад
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
@alicefraser5799
@alicefraser5799 3 месяца назад
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!
@traezeeofor
@traezeeofor 7 месяцев назад
I built along with you. My first Full stack next.js app. Thanks man!
@pramodhost
@pramodhost Год назад
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.
@davique0
@davique0 Год назад
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 💰
@synava7890
@synava7890 11 месяцев назад
Same 4 me 😅
@DevranDenizzz
@DevranDenizzz Год назад
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
@homekraftt
@homekraftt Месяц назад
not working any other solution
@retro61
@retro61 6 месяцев назад
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
@HarshSingh-kr2ci
@HarshSingh-kr2ci 5 месяцев назад
[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
@eliyahutarab4862
@eliyahutarab4862 Год назад
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
@laurentdislaire7772
@laurentdislaire7772 8 месяцев назад
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.
@GTCoding
@GTCoding 8 месяцев назад
Glad it was helpful!
@yassineDigital1
@yassineDigital1 3 месяца назад
@@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
@yassineDigital1
@yassineDigital1 3 месяца назад
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)
@arslanofcl
@arslanofcl 10 дней назад
Such a comprehensive to the point tutorial just what I was looking for, thanks 🙏🏽
@elijahisaiah3731
@elijahisaiah3731 Год назад
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
@doublegang6383
@doublegang6383 Месяц назад
Thank you🙏 Finally a tutorial that explains API in Next.js clearly. Simple and concise
@mehboobfazal
@mehboobfazal Год назад
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
@judevector
@judevector Год назад
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
@code-index
@code-index Год назад
Exactly is there any way to connect database once
@AbdulMoiz-q7x
@AbdulMoiz-q7x 10 месяцев назад
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
@premKumar-il1qy
@premKumar-il1qy 10 месяцев назад
⁠@@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.
@thisisachannel-wu2mf
@thisisachannel-wu2mf 8 месяцев назад
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
@pjguitar15
@pjguitar15 Год назад
I took down notes all the codes you taught here. Now I can build my own apps with this. Thank you so much!
@ernanisilva5264
@ernanisilva5264 Год назад
Ola Mestre, sou do Brasil e quero agradecer por compartilhar seu conhecimento, simples e eficiente, thank you !!!!
@MarcosFelipe-up9lc
@MarcosFelipe-up9lc 10 месяцев назад
Verdade!!!
@marvelous812
@marvelous812 Год назад
terima kasih, ini adalah tutorial yang saya cari selama ini, sesuai dengan apa yang saya butuhkan! TERIMA KASIH BANYAK salam dari INDONESIA
@sanjayguwaju
@sanjayguwaju Год назад
I have completed this tutorial and it was awesome expericence. Learned all the basics of Next.js. Thank you
@GTCoding
@GTCoding Год назад
Great to hear!
@RanaAhmed-j2b
@RanaAhmed-j2b 10 месяцев назад
Your teaching style is very clear and straightforward. I really appreciate it. ❤❤
@duduziuz
@duduziuz Год назад
Simple, didactic and straightforward. Excellent tutorial!
@amardxb999
@amardxb999 Год назад
This video is enough to understand crud in next js in very simple way.
@菲张
@菲张 5 месяцев назад
A nice example that help me learning the Next.js much better
@fateme731
@fateme731 8 месяцев назад
Thank you, This amazing toturial help people to put their raw knowledges on test and start their journey.
@patricklemmer-adeveloperss3458
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!
@yoonlimin17
@yoonlimin17 Месяц назад
This video is really helpful and easy to understand... Thank you for uploading!!!
@helixo.2630
@helixo.2630 5 месяцев назад
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
@baylonyap1113
@baylonyap1113 2 дня назад
Wow, very clear... direct to the point...
@brij1728
@brij1728 4 месяца назад
Awesome video! Very well explained. I created it using TypeScript. Thanks!
@SumitBhoumik
@SumitBhoumik 8 месяцев назад
Great information about next js 13 and 14 with the new route handler. Great stuff. Thanks.
@AbdulMoiz-q7x
@AbdulMoiz-q7x 10 месяцев назад
Really concept full video. I got a strong concept of API methods how they are working. Amazing bro Great Explanation❤❤❤❤
@MarcosFelipe-up9lc
@MarcosFelipe-up9lc 10 месяцев назад
Thank you very much bro, I learned a lot with this tutorial, greets from Brazil!
@IITHYDCSEtagore
@IITHYDCSEtagore 6 месяцев назад
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.
@pravaatchhetri8809
@pravaatchhetri8809 9 месяцев назад
The tutorial is detailed and complete in all sense. Love it.
@shoaibhossain4545
@shoaibhossain4545 10 месяцев назад
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.
@pedrocoloma2427
@pedrocoloma2427 4 месяца назад
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) => (
@yesfredfredburger8008
@yesfredfredburger8008 28 дней назад
'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
@leonardohurovich3381
@leonardohurovich3381 Год назад
Very nice video! Your didatics are so good, keep it up man!
@mohammadbelal877
@mohammadbelal877 10 месяцев назад
Nice explanation and very good for the beginner. Thanks
@FaustinoVasquezLimon
@FaustinoVasquezLimon Год назад
Really this a great tutorial to learn more about this framework, thanks very much
@SalmaMohyadiin
@SalmaMohyadiin 14 дней назад
Thank u So Much
@MehmetWesim
@MehmetWesim 10 месяцев назад
One of the best videos on the topic. 👍
@arvinvaje1029
@arvinvaje1029 Год назад
Great one for understanding api routes for NEXT js 13.4 above. Thanks.
@zedcr7600
@zedcr7600 5 месяцев назад
Thank you, now you are my teacher!
@justgetajobprachi
@justgetajobprachi 7 месяцев назад
Such a nicely explained video, thank you so much for this 👏👏
@kumardeepam
@kumardeepam Год назад
Excellent tutorial mate! Your teaching style and voice reminds me of Mumshad Mannambeth of KodeCloud.
@imamulkadir
@imamulkadir 11 месяцев назад
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?
@shark_one_plus
@shark_one_plus 4 месяца назад
Thank you, simple Nice explanation.
@anangyoga1381
@anangyoga1381 10 месяцев назад
thank you! it's simple & easy to follow.
@leonardjoy9708
@leonardjoy9708 11 месяцев назад
Clean and very straight forward. Thanks
@phanimurari4327
@phanimurari4327 Год назад
Thank you So much brother. Love From India 😀
@damsan7777
@damsan7777 9 месяцев назад
did you deploy?
@AmarKrishna-c5h
@AmarKrishna-c5h Год назад
Thanks you so much for the clear and well explained tutorial
@raghavendra6978
@raghavendra6978 Год назад
Thank you !! The tutorial was wonderful and easy to follow ^^
@I619WILL619ROX619U
@I619WILL619ROX619U Год назад
Great Tutorial. Thank you so much!
@ImamNurArifinHA
@ImamNurArifinHA Год назад
this really helps me learn js next
@Badis-n2u
@Badis-n2u Год назад
I recommend showing us how to add pagination
@dr.zalchicha774
@dr.zalchicha774 Год назад
Pretty good stuff! I was able to create a nice CRUD. Thanks!
@kdeepak629
@kdeepak629 Год назад
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
@mroy.in21
@mroy.in21 Год назад
This is a great tutorial for beginners!
@yassineDigital1
@yassineDigital1 3 месяца назад
thank you very well from moroco
@harsh_pathak27
@harsh_pathak27 10 месяцев назад
Excellent Course Sir
@damsan7777
@damsan7777 9 месяцев назад
did you submit?
@MadRad1000
@MadRad1000 2 месяца назад
Excellent, thank you very much...
@MurodjonMuzaffarov-e3u
@MurodjonMuzaffarov-e3u 17 дней назад
Does this require the knowledge of mongodb before doin this tutorial?
@LifeWithRukky
@LifeWithRukky Год назад
This is a great tutorial, glad I came across this video.
@sulmanahmad6943
@sulmanahmad6943 10 месяцев назад
Well Explained and consized 👍
@kooyaw4445
@kooyaw4445 Год назад
This was helpful. Thank you brother
@Juh1791
@Juh1791 9 месяцев назад
Great tutorial 🏆
@KrishnaKamlesh-r6z
@KrishnaKamlesh-r6z Год назад
Wo very helpful great project❤❤ I have learned so much🎉
@davicardoso960
@davicardoso960 Год назад
You are the guy!!! thanks a lot bro.
@bobdpa
@bobdpa 3 месяца назад
Is it necessary to try/catch on these operations from the backend?
@ballisticdog9164
@ballisticdog9164 Год назад
10/10 guide thank you so much
@21hpn2
@21hpn2 Год назад
Could you make a video securing the APi with a key or authentication?
@aninditadas7348
@aninditadas7348 5 месяцев назад
Thanks for this one
@tamerahmed9860
@tamerahmed9860 Год назад
Thank you! Great efforts
@tariqalvi6771
@tariqalvi6771 9 месяцев назад
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.
@manasparatane1855
@manasparatane1855 9 месяцев назад
hey did u find the solution to this problem , if yes please reply me and tell me how to fix that error
@tariqalvi6771
@tariqalvi6771 9 месяцев назад
No I couldn't find it. Someone suggested to use Axios instead of fetch method, I tried but it didn't work.
@Wintergrim_Entertainment
@Wintergrim_Entertainment 6 месяцев назад
Same problem here
@풀스택공부
@풀스택공부 Месяц назад
Trycatch statements are not available for server components. Next.js seems to judge error.tsx as a client component by default.
@ImanolMayoRojas
@ImanolMayoRojas 11 месяцев назад
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 : )
@nadeemsymun2196
@nadeemsymun2196 Год назад
Thanks for this great video.
@Dev_Life890
@Dev_Life890 Год назад
Thank you very much for the Tutorial. Can you make a video on how to deploy it to Vercel or Netlify ?
@GTCoding
@GTCoding Год назад
Ok, I will add it to my to-do list.
@КириллМахновский-я3ф
29:00 in my postman I have 500 internal server error, what's problem?
@shreedharpatil1710
@shreedharpatil1710 Год назад
Same issue
@КириллМахновский-я3ф
@@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
@malikbhai2285
@malikbhai2285 Год назад
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
@hajimeippo804
@hajimeippo804 10 месяцев назад
Thank you very much!
@ExtraTurtle
@ExtraTurtle 11 месяцев назад
If a user now types /api/get for example in the address will it open a json view of the result?
@tikki1683
@tikki1683 Год назад
Simple and Perfect!!!😍
@linuxon-s3f
@linuxon-s3f Год назад
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?
@aburaihan-py4vi
@aburaihan-py4vi Год назад
Excellent!
@sherdilxd
@sherdilxd 3 месяца назад
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?
@hakanaki
@hakanaki Год назад
Quick question. Is it advisable to connect to mongo db on every request?
@bicntt
@bicntt Год назад
This is nice turtorial, thank you for this video. and i subcribled your chanel.
@damsan7777
@damsan7777 9 месяцев назад
did you deploy?
@darthvader2980
@darthvader2980 2 месяца назад
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.
@tnpsc_success_stairs
@tnpsc_success_stairs 8 месяцев назад
Everything is fine. But, is that correct way router.refresh() after I create or update?
@traezeeofor
@traezeeofor 7 месяцев назад
I just used use effect so TopicsList is always fetched anew on page load
@georgehabib4333
@georgehabib4333 Год назад
Thank you for this tutorial. @22:08 In the mongodb.js, is there a particular reason why you used const instead of function ?
@gamefreak1675
@gamefreak1675 Год назад
Its just preference. You can use them interchangeably
@tsykin
@tsykin Год назад
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
@Md.AbuSalehNasim Год назад
I am also facing the same issue. If you find any solutions, please let me know
@QTCV
@QTCV Год назад
@@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
@MuhammadHaseebAhmed
@MuhammadHaseebAhmed Год назад
brother have u fixed it?
@MrVjekoZg
@MrVjekoZg Год назад
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
@ishortgameplay
@ishortgameplay Год назад
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
@scientificshiv
@scientificshiv 2 месяца назад
43:00 - (topics . map) is returning an error, even if I clone your repository. It says topic is undefined. Please help.
@Rattawo
@Rattawo 10 месяцев назад
TypeError: Cannot destructure property 'topic' of '(intermediate value)' as it is undefined. I have a problem getting topic by id please help
@damsan7777
@damsan7777 9 месяцев назад
i have the same problem, did you solve?
@hamzapaskingakhtar
@hamzapaskingakhtar 9 месяцев назад
Same here. Thats strange
@spencersnygg6966
@spencersnygg6966 9 месяцев назад
same
@hamzapaskingakhtar
@hamzapaskingakhtar 9 месяцев назад
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
@hamzapaskingakhtar
@hamzapaskingakhtar 9 месяцев назад
This is not a good solution but it's what I found and I wasted hours on this. 😂
@KalyaniMucharla
@KalyaniMucharla 5 месяцев назад
Tq helped me a lot
@HeartBlanco
@HeartBlanco Год назад
What extension you are using?
Далее
ФИКСИМ БАГ
00:42
Просмотров 49 тыс.
g-toilet fights juggernaut (skibidi toilet 77)
00:59
Просмотров 1,8 млн
I Wanna Learn Golang - Day 5
3:58:38
Просмотров 10 тыс.
Realtime Chat App in React Native and AWS (Backend) 🔴
3:29:01