Next.js 13 Crash Course (2023) - Prisma, MongoDB, CRUD, REST API

hi everyone in this video we are going to look at next JS version 13.4 and explore all the new features including the app directory server components data fetching layout loading error handling and more additionally we will learn about Prisma and mongodb and how to connect with them lastly I will show you how to connect next JS with Prisma and mongodb these Technologies offer powerful tools for building data driving applications and I will guide you through the process of integration whether you are new to next JS or assassin user this video will keep you up to date with the latest features and techniques so let's jump into the world of next JS 13.4 [Music] I am going to use vs code editor you can use whatever you prefer and then I am going to start with new folder and it's completely empty folder on my desktop I am going to name it next crash course once you've created you can drag and drop it to your empty Visual Studio code window inside of here Now open up terminal or you can press Ctrl back teeth and we are going to type npx [Music] create this next Dash app latest now obviously in order to run that command you are going to need to have node.js installed on your computer so make sure you have node.js installed let's go ahead and run that we should get some questions what is your project name I am going to use this directory so let's type Dot and then if we want to use type script I am going to say no to that yes link say no just want to keep this simple we want to use Tailwind says so let's say yes we will say no to having a source directory and then yes for app router we want to use alias [Music] foreign [Music] server so let's type npm run Dev [Music] now in your browser just visit localhost colon 3000 and there you have it beautiful or home page back to our code let's go into the app folder and then paste.js file and everything you can see here is coming from here I am going to remove everything inside this file now type rafce press enter let's say home page we don't need this line inside this div let's have an H1 tag in here let's say home page give it a class name equal to takes dash for Excel because we are using Tailwind CSS below that H1 tag let's have a paragraph tag give it a class name equal to py-10 and inside this paragraph tag I am going to add some dummy text now save it let's go into our global.css file and let's remove everything in here but we need these three lines because we are going to use Tailwind CSS now save it back in the browser now you can see our title and paragraph [Music] now I want to talk about routing because this is probably one of the biggest changes in next JS imagine we want to create an about face [Music] like that now if I want to do this in this version of next JS I would create a folder called about inside app folder so let's do this about inside this about folder I want to create page.jsx file it is important and really important for you to call it page.jsx because this is how next JS will identify that this is supposed to be a page or a route and the way they are gonna get the name of the route is based on the folder as you can see over here now this is our home page let's go into our page.js file or we can rename it page.jsx now copy everything from here let's go into our about and then page.jsx file and paste it right here let's just change the name of our function we can say about page in here let's say about page and paragraph We can say this is our about page now save it and this is done there is no need to worry about managing routes or setting up a separate folder for them everything is already set up for us back in the browser and then app in your address bar you can visit slash about on the end of the URL beautiful you can see that it is displayed exactly what we put on that page.jsx file so this is a major change into next JS now the question is how we can link between those two pages like how could we have a link on the home page that you click on to visit slash about so let's go to our home page and imagine we want to add a link below the paragraph that links to the about page so up at the top we are going to import a tool from next.js we are going to say import link from next slash link now we can use the link tool so in here let's say link [Music] about page give it a href value equal to slash about now save it Let's test this out nice it's working again in our about page let's have a link back to the home page so let's go our about and then paste.js file and up at the top here we can say import link from next slash link below that paragraph tag let's say link home page give it a ray value equal to only slash that means home page now save it Let's test this out now we can jump back and forth [Music] now I want to create a nested route that is extension of the about route like slash FAQ to achieve that I am going to create a folder inside about folder called FAQ and inside this FAQ folder I am going to create a file called paste.jsx now let's copy everything from here and paste it right here we don't need this link and paragraph so I am going to remove those link and paragraph let's change the function name FAQ we don't need this link and in here let's say this is our FAQ page now save it now we can come inside our website and if we will go to the slash about Slash FAQ you will see the FAQ page now I want to show you how to create a dynamic route imagine we want to have an ID or something like this to achieve that inside our about folder we are going to create a new folder first we want square bracket and then inside this square bracket let's say ID make sure you are using square bracket and then I am going to create page dot j6 file let's copy everything from this page and paste it right here I am going to change our function name let's say Dynamic page in here let's say params just like this let's remove that paragraph and inside this h on tag let's say this is the about page with ID colon [Music] params.id now save it now if we come over here and we try to go to the about page slash one you will see that it will say id1 let's change it to 5 you will see that it would change to 5 so this is dynamic changing based on the URL I want to add an app bar but the question is how do we display inside of every single page like home page about page and so on well to achieve that let's go into the layout.js file and inside this body element and above the children let's have an H1 tag in here let's say header give it a class equal to takes Dash Excel now save it now you can see the header text inside of every single page [Music] that's very nice let's create the actual number I am going to remove this H1 tag let's have a new div and I am going to move the children props inside that div and that div is going to have a class name equal to Max with 4XL MX Dash Auto and px-5 now I want to create a component folder so let's say component and then header.js file Type R a f c e for now in here let's say nav bar now save it let's go into our layout.js file I am going to import header component so above at the top right here let's say import header form dot slash components slash header inside this div let's say header self closing tag now save it you can see the maximum width and the net bar which is coming from here now let's create our actual number we don't need this line in here let's say import link from next slash link I want to create an array of nav items so in here let's say constant nav items equal to array and then object label colon home href slash let's duplicate this object this one will be about ref will be slash about this will be FAQ and ref will be about Slash FAQ we don't need this text inside that div let's have an UL tag now I want to render nav items so in here let's say nav items dot map link comma index Arrow function let's have a list item give it a key equal to index which is coming from here inside this I will add a link element in here let's say link dot level and the href will be link Dot href now save it back in the browser now you can see it's working perfectly let's add some CSS in here let's say class name equal to Flex Gap pipe py-10 now save it now it's looking nice [Music] let's make it clear which page you have currently visited by adding an active class to achieve that we can create a CSS class for the matching URL path in the link element simply use the class name attribute if the URL matches at the Active class or you can use instead of using empty steam now how do we check the current URL path well it's simple we can utilize something called use path name okay let me show you what I mean up at the top let's import use path name from next slash navigation inside this header function let's say constant path name equal to use path name parenthesis I will scroll down and in here let's say curly brackets and inside it let's say if the path name equal to link dot href then output will be text blue 500 and font bold otherwise our output will be nothing now save it okay now you can see an error we have to add use client so let's copy this one and at the top right here just paste it now save it again now we are not getting any error also you will notice that the page you are currently on has a darker blue and bold text now if I click on this about Network item you can see it's dark blue and text bold now the question is why we got the error because this is not server component this is client component so we have to mention that this is client component by adding use client now if you want to know more about client component and server component open up a new tab and go to nextjs.org now click on this get started button and then react Essentials I will scroll down [Music] and here you will get when to use server and client components you can read this section to know more about server component and client component [Music] now we will learn how to change font family back to our code let's go into our layout.js file now I want to use Poppins font so in here let's say Poppins let's change it to pop-ins in here let's say pop-ins which is coming from here and we can add here on more property like weight colon square bracket and then font weight will be 400 600 and 700. now let's copy these Poppins and paste it right here now save it and you can see our Poppins font also we can add some metadata like we can change the title name here back to our code in here let's say next Js crash course generated by light code now save it now you can see the title is next JS crash course sorry for the spelling mistake and finally we can add footer section so below that children props we can add footer self closing tag and at the top let's duplicate this line and in here let's say footer from dot components slash footer let's create this component so inside this components folder let's create a footer file now Type R a f c e press enter we don't need this line anymore inside this div let's say all rights reserved and that div is going to have a class name equal to py-10 X will be centered now save it also let's go into our layout.js file and save this file now you can see footer text inside of every single page [Music] now I will show you how to fetch data I will create another route called post so inside this app directory let's have a new folder called posts and then a file called page dot j6 now type rafce press enter let's say posts we don't need this line anymore now save it let's go into our header.jsx file I will create a new nav item label will be post and hdf will be slash post now save it back in the browser you can see a new nav item just click on it and you can see a new page now I am going to use fake data so open up a new tab and go to jsonplaceholder.tpco.com I will scroll down click on this link and you can see fake data and here is the URL we are going to use that URL so let's copy that URL I will leave the link in the description it's a free API which just gives us like fake data so we can test inside of our project we can create a function up right here so let's say asynchronous function get posts data inside this function let's say conostan race to get a response from the API request we will say have it Fetch and we will put the link to the API inside of here like this and I am going to return like this return race dot Json now how do I access this data inside of our application well since this is a new version of next JS what I can do now is I can actually make this function asynchronized so let's say asynchronous and in here let's say post equal to have it get post data now we have access to this post we don't need this text anymore so let's get read this text inside this div let's have an H1 tag in here let's say post page give it a class name equal to text Dash 4XL below that let's have an unorder list and then post dot map post error function at the top right here I am going to import link so let's say import link from next slash link and in here let's use it so let's say link give it a key equal to host dot ID href will be slash post slash dollar sign post dot ID inside it let's have a list item and that list item is going to have a class name equal to BG Dash Gray 100 p dash 5 and cursor will be pointer inside it let's have an H4 tag in here let's say post dot title and that H4 tag is going to have a class name equal to takes Dash Excel font will be bold below that let's have a paragraph tag and in here let's say post dot body I want to add some style for the on model list so let's say class name equal to flex Flex call and cap five now save it and you can see a list of post is being displayed in our screen and this is great [Music] one thing that is actually cool as well is that there is also a loading component that we can put okay let me show you what I mean we can just come over here and create a new file called loading.jsx now type rafce press enter and let's say that while the data is loading I just want to say loading dot dot dot remove this line and save it now reload the page we could not see loading because it happens quickly let's go into our page.jsx file I will scroll up and in here let's say Ave it new promise [Music] resolve and then Arrow function set time out result comma 3000 that means wait three seconds now save it now reload this page now you can see loading which is coming from here now imagine there is an error in any of this like if I were to delete something from here from the API in this way and obviously this will throw an error because it should throw an arrow right this is not a legit API to be fetching data if I save it so as you can see over here it will give us an unhandled runtime error because there was an error in the fetching we don't want to display this to the users we want to display a customized message saying that there was an error now that way we do this with this version of actions is we can actually just create an error.jsx file inside of this route so let's create arrow.jsx now Type R a f c e press enter we don't need this line anymore in here let's say use client because we want to turn them into client component and in here let's say there is a data fetching error now save it now you can see our customize error message which is coming from here let's go into our page.jsx file and I will come over here and actually replace this back to what it was before now save it back in the browser now it's looking nice again thank you now one thing I want to show you we can actually fetch multiple data at once like I can actually create another function over here so I will say get users data and this API does have users in point as well so let's try to get both of them at once so the way I am going to do is I am going to use promise so let me show you what I mean in here let's say constant we will first try to get the post and then the users as an array like this and then let's say Ave it promise dot all now we can put the functions over here to request the data in the order that we want to receive on the left so first we want to say get post data comma get users data so we are fetching two different apis or two different endpoint in the same server component now we can render our users data so in this div below this H1 tag let's have an ace to tag in here let's say users give it a class name equal to takes Dash to excel below that H1 tag let's say users dot map user index Arrow function inside this Arrow function let's have a paragraph tag and in here let's say user.name and the key will be index now save the changes now you can see our user's name and then the post that means users API and post API are working perfectly [Music] now let's just start working on the API part so the backend building will be using the Prisma so it makes easier to work with any type of database whether it's SQL or no SQL so let's just move on step by step so open up terminal and press Ctrl C and type npm install Prisma dash dash save Dash tape press enter it will be a development dependency now we want to install Prisma client so let's say npm install Prisma slash client [Music] after that we want to initialize the Prisma to our application so let's type npx Prisma init so it will initialize the Prisma to our application and you can see once you run this now we will be having the prismap folder here and inside the pisma folder you can see we have the schema file in which we'll be having a schema let's run our application npm run Dev [Music] and there you can see we have the client and we have the database so what we want to do is here the database provider would be the mongodb because we are going to use mongodb database save it now you can see inside this environment we need to pass in the database URL which is coming from here so we need to change the database URL from here Now open up a new tab and go to mongodb.com let me just sign in so click on the sign in button I will type my credential once you log in that brings you to the dashboard let's create a database by clicking build a database button choose free option I will scroll down you can choose cluster name whatever you want and then click on this create button now we have to create username so I would say light code and then the password will be light code one two three now click on this create user button I will scroll down and I want to add IP address in here let's say 0.0.0.0 and then slash zero description will be all now add entry and click on this finish and close button go to database and then click on this connect button and then mongodb for vs code let's copy this URL back to our code let's remove this URL and paste mongodb URL I will replace this password using my username password so let's say light code one two three and after the slash icon let's say next cash course now save it and close it up now we want to create our model so in here let's say model post curly brackets we will be having the ID and the ID would be part of the steam so let's say sting and then we'll be having the default ID as well because the mongodb creates a default ID so let's say ID space default Auto after that we want to map this ID because inside the mongodb we have the ID with the underscore ID so let's say map underscore ID and finally we want to provide the map Expressions as well so that should be DB dot object ID below that we can have the title as well so the title should be part of the string we can have the description and it will also be the part of the steam we can have the created at and that should be part of the date time so in here let's say date time default now so created at would be automatically created as the current time stamp from the now below that we can have the updated ad and that should be part of the date time [Music] now save it so you can see that's how the post model will work now we want to sync our application to the database now press Ctrl C and let's type npx Prisma generate so it will just generate the schema so you can see the Prisma schema are loaded and after that now we want to push this schema to the database so let's type npx Prisma DB push which will push the schema to the database [Music] allow access go to the mongodb page and click on this browse Collections and you can see the database you can see here next class course which is coming from here also you can see post which is coming from here for now there is no data because we don't have any data so we want to work next step in this terminal let's say npm run this I want to First create a ellipse folder inside app folder so let's say lips inside it let's have a Prisma db.js file okay inside of my Prisma DB I will import with my client so let's say import is my client from Prisma slash client below that I will declare my Prisma globally and I will use whenever I need inside of my application so in here let's say constant client equal to Global this dot Prisma or I am going to add new pisma client instance so the reason why I am doing this I don't want to add Prisma client in every stage of my application so below that let's say if process dot EnV dot node underscore Envy is not equal to production then Global this dot pisma will be client now finally I am going to export clients so let's say export default client now save it and close it up [Music] now let's just move on to this app folder and inside it I want to create an API folder and inside this API folder let's have a post folder and finally route.js file it is important and really important for you to call it route.js because this is how next JS will identify that so you can make a request to the localhost slash API slash post so our URL would be just like this so let's go ahead and let's define some routes over here first I want to create post request so at first I want to import Prisma from Prisma DB we just created so let's say import Prisma form app slash lips slash Prisma TV below that I want to import next response so let's say import next response from next slash server first I want to create post request so let's say export const post equal to asynchronous function in here let's say request Arrow function now inside the post we need to get some data from the body and from the body we can get the title and description so in here first we want to add try catch method in here let's say constant body equal to have it request dot Json below that we can get the title and the description from the body so let's say constant title comma description equal to body below that let's say constant new post equal to Ave it pisma dot post dot yet now we need to pass the title and the description to the data so let's say data title comma description and finally we want to return next response dot Json new post and inside the sketch error we want to return next response dot Json message will be post error comma error and status will be 500 now save it now we can test this request to test our request you can use Postman but I am going to use a vs code extension called thunderclined so you can use Postman or vs code extension back to our code now click on this extensions button and search for Thunder client here is the extension I am talking just install it after installing you will get a icon on the left side just click on it I will create a new request let's go into our route.js file I will scroll up let's copy this URL let's go into the new request Tab and just paste it here this is our post request so select post and then click on this body tag now we want to pass the title and the description so let's say title would be this is a title and the description this is fast description now we can click on the send button okay we are getting error that should be localhost Let's test this again and you can see we successfully created our new post let's go to our database and refresh it and also you can see our new post is here so everything seems to be working perfectly and you can see we have successfully created a post let's create more post so in here let's say title 2 and this is second description send it let's say title 3 and third description again let's say title 4 and 4th description back in the browser refresh it and you can see there are four posts now in this position our post request is complete now we can focus on our gate request so let's go to our route.js file and I am going to copy this post request and below that I am going to paste it in here let's say get we don't need this request we don't need this body also we don't need this data in here let's say find many in here let's say post and error message could be gate error now save it let's go to our Thunder client and select get request send it and you can see we are getting the records let's create another record let's say Title 5 hit description send it now select get request send it I'll scroll down and you can see our last post so everything seems to be working perfectly now the gate and the post request is complete now we want a dynamic ID because now the further request get a post by its ID and delete a post by its ID also update a post by its ID so for that we need the ID so what we can do is we can create a dynamic route so let's create a dynamic route so inside this post folder I will create a new folder let's say square bracket and inside it let's say ID and then route.js file let's go into our post and then route.js file I will scroll up we need those lines so I am going to copy those three lines let's go into our API post ID and then route.js file and in here I am going to paste those three lines and in here you are URL would be localhost slash API slash post slash one two three four five just like this that should be localhost and also in here that should be localhost now save it first I want to create get request so let's go into our post and then route.js file I will scroll down I am going to copy this get request and paste it right here now first we want to get the dynamic ID so the question is how can we get the dynamic ID well we can get the dynamic ID from params okay let me show you what I mean in here let's say request comma params just like this inside this try method we can say constant ID equal to params here let's say post and then pisma dot post dot find unique inside it let's say where ID colon ID or we can write only ID just like this below that if not post which is coming from here then return next response dot Json message will be post not found and then error and the status will be 404 otherwise return next dot Json post now save the changes Let's test this out let's go into our Thunder client create a new request in here you can see our all records so let's try to get fast records let's copy this URL and paste it here and then let's copy this ID and paste it right here now send it you can see our first post if you want to get second post or third post let's copy this ID and paste it right here send it and you can see our third post next let's create update request so let's go into our post.rout.js file I will scroll up I am going to copy post request from here and below this get request I am going to paste that post request post should be patched we want to get ID so let's say parents below that title and description let's say constant ID equal to params let's change it to update post create should be update and inside it we will add where ID equal to ID make sure you add comma here now I will scroll up let's copy this logic I will scroll down and paste it right here in here let's say if not update post and return should be update post message would be update error now save it let's test this out select batch request click on this body tag now I want to change title so let's say title would be title 3 updated now send it you can see title 3 updated let's check our all record I will scroll down and you can see title 3 updated back in the browser just refresh it and in here also you can see title 3 updated so everything is working perfectly and finally we want to create delete request back to our code let's go into our post ID and then route.js file I will scroll up let's copy the get request I'll scroll down and below that patch request I am going to paste it let's change it to delete we don't need this anymore here we can say delete also we don't need this logic and in here let's say post has been deleted and in here let's say message will be delete error and this is done now save it let's test this out select delete request we want to delete title 3 updated so let's send it and you can see the message post has been deleted let's check our all record send it and you can see there is no title 3 updated post back in the browser refresh it and here also you cannot see title 3 updated post so everything is working perfectly and in this position our API part is complete [Music] okay first I want to create a craft folder inside our app folder so let's say grad and then paste.js file now type rafce press enter let's say card now save it let's add an app item inside our header.jsx file I am going to duplicate this one level would be card href would be slash grad now save it back in the browser now you can see crowd item back to our code we don't need this text anymore so I'm going to delete that and that div is going to have a class name equal to let's do maximum width I am going to say 4XL I am going to put it into the center so I can say MX which is margin horizontally to Auto okay I am going to add margin top to 4. inside it let's have a new div and that div is going to have a class name equal to I want to add margin vertically so I am going to set it to 5 display will be Flex let's say Flex column and GAP 4 inside it let's have an H1 tag in here let's say to do list app and that H1 tag is going to have a class name equal to text 3XL and font bold this H1 is basically like the title now save it back in the browser now you can see to-do list app title down here I am going to put another component called add post self closing tag we don't have that component so I am going to create add post component into the components folder so in here let's say add post dot jsx now Type R a f c e press enter save it let's go into the card and paste.jsx file I am going to import at post component we don't need this line and in here let's say import add post form dot dot slash component slash add post now save it you can see at post text which is coming from here let's remove this and I am going to render a button in here let's say add new post give it a class name equal to BG Dash blue dash 700 text white padding 3 and card store will be pointer now save it back in the browser now you can see our button back to our code now down here we want to add component called post list we don't have this component so I want to create that component inside component folder so let's say post list Dot jsx type rafce press enter now save it I am going to import that component inside here so let's say import post list form dot dot slash components slash post list now save it and you can see postlease text now we can create our actual post list here which will be coming from the database so right here I am going to create asynchronous function let's say get data and of course I am going to create a variable called race equal to avid change and then I want to add URL here so let's go into our API folder and then route.js file let's copy this URL and paste it right here below that let's say if not Trace dot ok then throw new error failed to fetch data and finally I will return race dot Json now I want to make this function asynchronous and inside it let's say constant post equal to avid get data now if I console log the post we should be able to see the data now save it this is server component so I think we can see that into the terminal and here we go we have the value here [Music] so now what we can do is I am going to send the post into the post list component so let's say post equal to post now save it let's go into the postlist.jsx file I want to distract post like this now we can set up map so post dot map and then we can get the individual post inside in here I want to create a new component let's say post self closing tag and in here let's say key equal to post dot ID and post equal to Kali brackets post now we need to create the post component so let's go into our component folder and then let's have a post dot j6 file type rafce press enter now save it let's go into the postlist.jsx file I am going to import post component so let's say import post from dot dot slash components slash post now save it let's go into the post.jsx file I want to distract post like that okay let's change it to UL tag now save it and in here let's add list item we don't need this post text anymore that list item is going to have a class name equal to p dash 3 Mi Dash 5 BG Dash slate Dash 200. and key will be post dot ID inside it let's have an H1 tag in here let's say post dot title give it a class name equal to takes Dash to excel and font will be bold below that H1 tag let's have a paragraph tag and in here let's say post dot description now save it now you can see our post list which is coming from our database now what we need to do is I want to create a model I want to display a model when I click on this button so let's create a model inside this components folder let's have a file called [Music] modal.jsx now Type R a f c a press enter we don't need this line we don't need this text to give it a class name equal to VG Dash black 50 Position will be fixed in set 0 inside it let's have one more deep and that div is going to have a class name equal to display will be Flex justify Center item Center and height will be full inside that div let's have one more div and that div is going to have a class name equal to display will be Flex column items end BG Dash late 300 with 50 percent and I want to add padding so let's say p dash 5 inside it let's have a button tag and that button tag is going to have a class name equal to takes Dash to excel I want to add margin bottom so let's say mb-3 inside it let's add close icon and inside this div I want to add children props which will be coming from here now save it let's go into the add post.jsx file first I want to import model so in here let's say import model from dot slash model and below that button tag right here let's say model for now in here let's say model goes here now save it now you can see our model we need to add a state that will handle the model pop-up so here I am going to create a variable which is State and I am going to call this modal open set modal open and that equals to use State make sure you import your state and by default it should be false now we need to send this model open into the model component so in here let's say model open equal to curly brackets model open also we need to send set model open so I am going to copy that and I am going to send that into the model component and in here on the button tag I want to add on click event Arrow function and set model open will be true now save it let's go into the model.jsx file first I am going to distract model open so let's say model open also I want to distract set model open now when the model open is true then we want to render this D so I am going to cut that div and in here let's say whenever model open only for that I want to render our div now save it we are getting error because we import this ug state so this component is the client component so in here we have to say use space client now save it now we are not getting any error Let's test this out if I click on this button you can see our model now I want to hide this model by clicking on this close button back to our code let's copy this on click event let's go into the model.j6 file and inside here in the button tag I am going to paste that click event and in here let's say false now save it back in the browser Let's test this out so everything looks working perfectly back to our code let's go into the atpost.jss file and in here I am going to create form tag so let's say form we don't need this action give it a class name equal to width will be full in here let's have an H1 tag and in here let's say add new post give it a class name equal to x dash to excel pb-3 below that I want to add input tag placeholder will be title name will be title give it a class name equal to width will be full and I want to add padding I am going to add on more input tag so let's copy this input tag and paste it below in here placeholder will be description and name will be description and in here I want to add margin vertically to my Five Below that input tag I want to add a button tag in here let's say submit and type will be submit give it a class name equal to BG Dash blue dash 700 text will be white px5 and py2 I will scroll up and inside this form tag I am going to handle the on submit event so in here let's say on submit equal to handle submit let's copy that function name and up here we can say const handle submit equal to I am going to grab the event here and then Arrow function I want to say e Dot prevent default and the next thing is I am going to create a state so in here let's say const Imports comma set inputs equal to use State and then empty object I will scroll down and inside this import I will say value equal to [Music] inputs.title or empty steam below that I want to add on change event in here let's say handle change function I am going to copy those value and on change and paste it right here in here value will be inputs dot description let's copy this handle change function I will scroll up and below that handle submit function let's say constant handle change equal to Arrow function first I want to Target the name so let's say constant name equal to e dot Target dot name and then hello so let's say constant value equal to e dot Target dot value and then I want to set them so let's say set inputs if State Arrow function dot dot dot Peak State and then Name colon value all right so now here I just want to console DOT log inputs just like that now save it let's go to the console tool now I am going to click on this button and in here let's say title and then description now hit enter and as you can see we have this title and the description but of course I need to reset the values back in the browser and in here let's say set inputs empty object now save it so again let's test this out in here let's say title and then description goes here now if I click that it should be gone okay it's working now we need to add our API so to do that I want to add actions so on our terminal let's say npmi which is short for install s [Music] let's run our server again first I am going to import xgos so let's say import exeos form xgos and inside this handle submit function let's say xgos dot post and then slash API slash host comma inputs then race Arrow function console.log race dot catch error console.log error and finally [Music] and finally we want to add let's say set inputs and I want to hide our model so let's say set model open false now save it so let's test this out in here let's say Title 1 and description one now click on submit button well as you can see the new post is not right here so what is problem open up a new terminal and go to nextjs.org click on this get started button and then data fetching and fetching I will scroll down here you can see static data featuring we need Dynamic data fetching so basically we are going to use the dynamic data fetching so we need to add this cats colon noise store into the fetching data so I am going to copy this one let's go into the card and paste.j6 file I will scroll up and in here let's say comma and then paste it now save it Let's test this again let's say title 101 and description 101 now submit we don't see the value until we refresh now you can see here so what we need to do is basically we need to refresh the browser right so first I am going to import use router so let's say import use router from next slash navigation so inside this add post we can say constant router equal to use router now we can use this router so I'll scroll down and in here let's say router dot refresh now save it now let's test this out again in here let's say using router and I want to add some description now hit enter and you can see at the bottom we have our new post so our add new post is working perfectly now we can forecast to edit post let's go into the post.jsx file below that paragraph I want to add button tag so let's say div and that div is going to have a class name equal to pt-5 inside it let's have an edit button tag so let's say button in here let's say edit give it a class name equal to text below 700 I want to add margin right so let's say MR3 also I want to add delete button so I am going to duplicate this button and in here let's say delete text should be red now save it so now when we click on this edit button it should be showing the pop-up so now let's create the model I am just going to copy the model from the add post so let's copy that model and I am going to put that model right here if I save it of course we get a lot of error because we don't have model open set model and so on so let's do that step by step I will scroll up and first I want to import models so let's say import model form dot slash model and inside this post function I am going to create state so let's say constant open modal Ed and then set open modal edit equals to use state by default it should be false make sure you import ug State below that let's say constant post to edit comma set post to edit equal to state by default it should be post which is coming from here we need to send open model edit in here [Music] also we need to send set open model edit in here also this function here I am going to change that to handle edit submit and let's create a function up here let's say const handle edit submit equal to Arrow function for now just put like so I will scroll down next thing is the value so in here let's say post to edit also in here let's say post to edit we want to create handle change function up here or we can just copy from add post so I will scroll up and let's copy handle change function and paste it right here and in here let's say set post to edit and again we can copy handle submit function from add post so let's copy this Arrow function and paste it right here we need to change something so in here let's say patch and URL should be slash API slash post and then slash let's change it to backtick and then I want to add ID so let's say post dot ID and this post is coming from here and inputs should be post to edit we don't need this anymore so I am going to delete this one I will scroll up and here I have to import exeos so let's say import exeos form axios below that let's say import use router form next slash navigation and inside this post function let's say constant router equal to use router now save the changes okay we are getting error because this is our client component so we have to mention that so in here let's say use client now save it now I am going to click on this edit button and nothing happened because we have to add on click event so I will scroll down and in here let's say on click Arrow function and then set open model edit that should be true now save it all right I think it should be working and it's working as you can see the value right here and I think it's working perfectly so let's update it let's say title to updated now hit enter we are getting error set model open is not defined back to our code I will scroll up and that should be set open model edit now save it okay let's test again I am going to change it to title changed and this is first description updated now hit enter or you can click on the submit button and as you can see it's update automatically so it's working perfectly now we can focus to delete our post first I want to create use state so in here let's say const open model delete comma set open model delete equal to use state by default it should be false I will scroll down and below that delete button I want to add modal component and in here modal open will be open model delete and set model open will be set open model delete inside it let's have an H1 tag and in here let's say are you sure you want to delete this post and that edge on tag is going to have a class name equal to text Dash to excel pb-3 below that H1 tag let's have a div and inside it let's have a button tag in here let's say yes and that button tag is going to have the class name equal to text Dash blue dash 700 font bold and margin right 5 let's duplicate this pattern tag and in here let's say no text should be red for the first button tag I want to add on click event so let's say on click equal to Arrow function and I am going to name it handle delete post and I want to send post ID so let's say post dot ID also here I want to hide that model so let's say on click set open model delete and that should be false let's copy this on click event I will scroll up and for this button when I will click this button tag I want to show pop-up so let's say on click set open model delete and that should be true finally we have to create this function so I am going to copy this function name and I am going to create up here let's say constant handle delete post Arrow function I want to grab the ID so in here let's say ID so basically in this function it's really really similar like this function so I am going to copy all of this I will scroll down and paste that right here in here let's change it to delete we can say here only ID which is coming from here we don't need this post to edit and this is done now save it okay we are getting error back to our code I will scroll down and in here we need to add Arrow function [Music] and again here we need to add Arrow function now save it now we are not getting any error now I am going to click on this delete button click yes it should be gone and it's gone let's click that again all right it's working perfectly so let's create again final title final description hit enter and you can see final title here let's edit it final title updated Here Also let's say update it and it's working let's delete it yes so everything is working perfectly our next JS crash course is complete if you like this video please hit the like button and subscribe our Channel foreign

Channel: Light Code

Views: 590

Keywords: Next.js 13 Crash Course 2023 - Prisma, MongoDB, CRUD, REST API, Next.js 13 Crash Course, Next.js Prisma, Next.js MongoDB, Next.js CRUD, Next.js REST API, beta nextjs, next js documentation, nextjs 12, nextjs 13, nextjs github, nextjs npm, next js install, tailwind nextjs, next js typescript

Id: KvesFlTVCaI

Length: 81min 19sec (4879 seconds)

Published: Sun Jun 25 2023