Build A Simple CRUD API With Next.js 13 App Router (REST API)

hi everyone so my name is nikhil so in this tutorial we will show you that how to create the API routes with the next sales version.in so in the next is version 13 the app router is now stable so we can create a production ready applications with the Nexus 13 with the app router so in this video we will create a basic grid API with the Nexus 13 app router so we'll only be creating the API part and not the front end and for testing.api we'll be using the postman so without wasting much time so let's get started so after this video you will have the solid understanding of how to create the API routes with the next cs13 app router so without wasting much time so let's get started so we need to copy this command for that so we can just copy that from here and then we can just move on and then we can just paste that command over here we have the npx create next app at the latest so we can just hit enter and then it will ask you for a couple of questions as well so what's your project name so we can keep it default as the my app and then you can see would you like to use it typescript so yes we'll be using the time card for this so we can hit on yes we have the would you like to use the eslint as well so we'll be using the Yes again Tailwind for the yes we have the source directory so we won't be using the source because we'll be using the app directory over here we have the app router yes the most important one and would you like to customize the default import so we can click on the no so after a couple of seconds it will install all of the dependencies which are required for creating the brand new next year starting application so let's wait for a couple of seconds to implement that applications is ready and now we need to move on into the folder so we have the card API and then we have the app folder which is the routing folder of our application so we have the app router so inside that you can see we have a couple of files so with the layout which is the root layout of our application and then we have the page which is the custom UI for a specific route so if you make a request to localhost Port of the 3000 because the development server would open on the 3000 sport of the 3000 then this page UI would be reflected inside that request so this page would be the handling that type of localhost Port of the 3000 request because this is a custom UI for a specific ground so the page is a UI and for creating the routes the route folder have the route dot TS file which is a custom request Handler for a API request so if you want to learn more about that then you can move on and then you can just learn about the next JS app router so you can have the next JSF router and inside that you can have a couple of things so you can see building your application with that and then you can have a lot of things over here so we can have the routing over here and inside that you can learn everything according to that so you can say you can learn about the file conventions as well which is the most important part like what are the files which are supported inside the next cs13 app so you can see for creating a custom UI so a page is a UI unique to our route and then you can see if you want to create the API request then you can move on you can create the route.js file in which it allows you to create a custom request standards for a given particular route so suppose if you want to make a route so what I will do here so we can just create a new folder that can be the API and inside that we can create a route so what we can do here we can create another folder of the block slide thing so we can have the blocks and inside that we can create the route.ts file so we can have this route.ts file so now this route.ts will be handling the request which is made to API blogs so this route.ts will handle the custom request which made to this route like we can have the get request as well we can have the post as well so you can see everything about that here so all of the HTTP methods are supported here as well suppose they get post delete like suppose you want to have a get function over here which you have the get request so you can have a custom function for the get so then you will be having the get function over there which will handle this incoming request you can have the post as well you can have the put as well you can have the delete as well you can have the batch as well so let's move on and let's just create a basic request over here so if you want to make a request to the localhost 3000 API slash blogs inside this route file if you want to make a get request then we can have the function we can have the export we can have the cons picking up the get so the naming should be same and that should be equals to an asynchronous error function we can have the parameters of the request and that type should be the request itself so we can have the type of the request like this so we can either type the request and this is an extended version of the request of the web request API so next yes has extended that and it has enabled the Nexus functionalities as well inside this request and now let's just move on we can have the response as well if we want to send some response so we can have the response and that should be again the response namespace from there so we have the response and the request and now you can see knock it should work fine and if you just log there so we can have the log statement as well like we can have the get request like this so we can have the log so now let's open the development server so we can have the CD into the my app and then we can just open the development server with the npm return Tab and now for testing the apis so for testing the UI we can just test the UI directly on the web browser but for testing the API so we need a software which can test that API so we need to install the postman so Postman is API testing platform that is used to test the rest API for the graphql apis let's move on so I already have installed the postman so you should also install it and then let's come back later so you can see if you want to make a get request to this particular route so let's move on so the request can be we can have the http localhost in the HTTP we can have the localhost the port of the 5000 and slash we can have the API because we have the folder of the API so each folder is a route so with the API and then we have the blocks so we can have the blocks as well so we have the HTTP localhost Port of the 5000 so I think that should be the localhost photo of the 3000 not the 5000 so API blocks so if you just click on this send so you can say inside the console window you will get the console message which is a get request so you can see now we are seeing the get request over here and it is working perfectly fine so same you can have the post request as well so you can just copy that over here you can just copy and paste you're gonna be post over here so here you have the post and inside that you can add the post as well you can have the post and with that if you make a post request over here if you will just click on the send then you can see now you are seeing the post request over here and everything seems to be working perfectly fine so you can see now we have this static route file over here so here we have the static route.ts file but what if we want a dynamic route so what if you can see we have the blocks and if you want to fetch a particular block then we want to send the ID as well like one two three four five so then how we'll be accessing that so for that we need to create the dynamic route as well so for creating the dynamic route again we need to have here the blocks and inside the blocks now what can we do so we can just create another folder that can be the dynamic folder with the square brackets and the ID within that so with that we can have the dynamic folder over here and inside that folder we can again create the route.ts file which will handle that incoming request to this Dynamic ID so that will be the approach and that is supported inside the next year starting app problem so inside that if you want to accept any requests like again we can have a function of the get you can have the export cost we can get over here and that should be async error function we can have the request and the type should be the request itself so the request type should be there and now if you want to just lock something like you want to lock something like you can't block the get and if you just save and if we move on to the application and if we want to just send the request of the localhost port of the 3000 API blocks 1545 then you can see this lock message would be then appearing with the dynamic ID so you can see you are making the request to the dynamic ID which is the blocks which slash blocks slash any ID after that that can be any Dynamic ID so this route is handling that part of request so that's how it works so that's how we create the apis with the next js13 app router so now you can see now we have a couple of files over here so you can see we have the route files we have the blocks files so you can see inside this Dynamic ID file now we'll be having a couple of functions so the functions that we'll be having inside this will be the get request in which we can just get a post by its ID speaking of the get a post by its ID and then we can have another function over here that can be I think that should be the put in which what we'll be having in which we'll be updating a post so we can see the update post byte study and then we can have another function over here so we can have the delete function over here in which we'll be having the delete HTTP request in which we'll delete the record so we can have the update we can have the delete over here and that's how it will work here as well so you can see here we'll be having the three Handler functions the get put into delete for handling all of the requests and here you can see inside the main route where they get and the post so that's how it will work so now what do we want to do as the next step so here you can see now we don't have the real database to insert some data so we don't have the real database so instead for creating the credit API we can just use the static data over here so inside the my app now I will now create another folder that can be the lib and inside the lip folder we'll be creating a new file that can be the data.ts file which will be handling the data part over here so here we'll be using the in memory data which means when we just restart this server so when we save any file again when we restart the server so the data would be lost so again and again we need to create every other new data after after saving something or after restarting the server so let's just move on let's just create here the data so we can delete we can have the post so that should be an empty array so we'll be having some posts inside the credit API so what do we want to do is the next step so here we have the post and inside that we need to declare the type as well so we can have the type and that should be we can have the post and that should be equals to inside that what we can do so we can have the ID so that should be the string we can have the title so that should again be the string we can add the description as well so that should be the string once again so that should be the title and after that we want to accept the date as well if you want to get that so we can get to about the date so that should be type of the date here you can see now we have the type of the post over here and now what we can do so we can annulate the type as well for the post so we're going to the post over here that should be the post array and now we want to have some functions as well for acquiring the database and for manipulating the data so for that now what do we want to do so we can have the export because we can have the get post so we can get post like this so get posts and that should be equals to a function and inside that now what we'll be doing so we'll be returning the post that we have inside this variable and here we can have the Handler functions like that so we can have the handlers so which will handle the data request over here we have the get post so inside that we have the post area over here and now if you want to insert a record then what we can do so we can have the add post inside that and inside the add post we can accept the parameter as the post and the type should be the post itself and instead that now what we can do so we can have the main post object we have the main post database dot we can have the push and then we can push here the post so that's how it will work inside the add post and now let's move on we can have the delete as well or we can have the update as well so let's just work on the delete so we can add the delete post like this and insert the delete now what we'll be doing so inside the delete we only be needing the ID so we can have the IDS so that should be of type of the screen and now I'm inside that now what do we want to do so we can have the posts over here so that should be equals to we can have the post the whole area of the post dot filter so we'll be filtering the post over here so inside the filter we can have the Callback in which we can have the post and that should be equals to become the post dot ID not equals to this ID that we are getting and then it will return a new copy of that array and then we are storing that array to the original post database so now we have the delete we can have the update as well so we can just copy that over here we can add the update post over here so we can have the update that should be the post and instead that what we can do so inside the update we need the data as well we need the ID we need the title as well we need that title that should the string be in the description as well again that should be the string and he said that no what do we want to do suppose we want to grab that post from its ID so we can add the post that should be we can have the posts array so we're going to Define and finding from its ID so that should be the prime and inside the point we're gonna be post over here they can have the post dot ID so that should be this ID so we can find a post and then if we find that post now what we'll be doing so if we find that post then we can just move on and then we can have the post or we can have the title so that should be the title that we are receiving and post your description like this we cannot be posted description so that should be the description that we are getting so that would be all this thing and if we don't have the post then what we can do so we can just throw a new error we can just throw a new error like no because we can have a pump so we can have this message over here and after that now what do we want to do the next step so here you can see we are complete with the get we are complete with the ad delete update and finally we want to get a post by its ID so for that now what we can do so again we can add the export const here get the export const so that should be equals to we can have you like get by ID get by ID so that should be equals to a function over here in which we'll be accepting the ID from the parameters so we can add the ID at this string and now inside that now what do we want to do so we can just return here we can adjust return the posts or we can have the find we can find a post by its ID the post so we cannot the post dot we can have the ID so that should be equals to the ID so you can see now our database part has been completed so it's not a real database it's a dummy database but still we have something to store so you can see we have the post which is a variable which will only be available in the memory and then with the get post we have the add post we have the delete update and everything seems to be working perfectly fine and now let's just move on and let's just start building the rest API the current API for our application so now we want to move on into the blocks so here you can see now we are just having the get request so instead of this now we can have the track Edge block over here so insert the catch if we get an error then what we can do so we can just return the response and for returning the response we have another method inside the Nexus which is used to send the additional response which is the next response okay the next response which is available from the next server which is used to send the extended response that you can send the Json over here and in the Json you can send the message over here like you can get the error and then if you want to send here the error as well if you want to send the error as well so you can send the error over here like this so you can have the error and now insert the second parameter of the Json then you can just send here an object as well which will be having the data so inside the object inside the second parameter you can send this status as well so the status of the request so status can be the 500 because you are getting some error inside the database operation so this status can be 500 so that's how it will work I think we want in the added over here now I'll set the try now what do we want to do so we can add the const we can have the post so that should be equal so we can have the get all posts from there so we can have the get I think we have the post over here we have the get post so it will just get all of the posts from our database and then what we can do so we can have the turn over here we can have the response or we can again use the next response over here we can have the next response not Json picking up the message so that should be the okay then we can send the posts as well we can send the post and inside the second parameter again we can send the status so that should be 200 so that's how it will work so if we just move on if we just make that request over here inside the API slash blocks that should the get request so you can see if we just click on the send now we are seeing the message as the okay then we are seeing the post area as well so you can see everything seems to be working perfectly fine because now we don't have any record inside the post and now let's just move on and let's just work on the post method as well the post HTTP method so inside the post we need some data as well from the body so inside the post request we need some data from the body so we can send some data from this body raw and the Json so we need to accept the Json data so for that we get the Json data from the request dot Json so inside this if you want to accept the title and the description so we can have the const we can have something so something that should be equals to we can have the request dot we can have the Json and this is a promise so we need to update for this task as well so away the request.json and whatever data that we send from here like suppose if we send the title over here so that should be we can give the title so that should be my new post over here and we can send here a description as well description we can send the sample so with that if we just make that request for the title and the description so we need to accept that over here we can have the title you can have the description over here we can have the title in the description and after that again we can use the try catch here we have the try catch and again inside the catch we can just copy that catch over here and then we can just paste that here at the try and the catch and insert the Triad now what do we want to do so here we can have the const we can have the post so that should be equal to an object so we'll create a brand new object of the post with the title so with the title in the description and with the date as well so the date can be we can again use the new date we can have the new date from the JavaScript the date Constructor and finally we can have the ID as well so that should be again with a unique ID so as of now we'll be using the date dot now dot beginner with two string which will give you a number of the current timestamp so with that now you can see now the post has been created and now let's just move on and let's just insert that into the database so we can have the add post over there we add post and the exact post that we have just created and after all of that after the ad post and been successful then we can move on we can just return the response so we can return this response and with that post over here so we can have the post and Status can be two oh one which is created so if we save it if we move on to the application if we just make a post request over here then you can see if you just click on send then you can see now we are seeing the post over here as the my new post and everything seems to be working perfectly fine over here we can have my new post we can update my second post as well we can click on send so you can see now we have two posts over here and if we just make a get request once again if we just click on the send so here you can see now we have two posts over here because the title of the my new post will be my second post so everything seems to be working perfectly fine so you can see now the get and the post API function is working completely fine so you can see that's all for the static route we have to get and then we have the post and now the next available functions for the cloud operation can be the update delete and getting by its ID so for that again we want to move on to the dynamic route because we want to get the IDS file now for getting the ID now here what do we want to do so here we want to get the URL so we're getting the URL now what we want to do so we can have the const we can have the ID so that should be we can have the request or we can have the URL and then we can just get the URL as of now we can just log that over here you can have the IDS fill so if we just save and if we move on to the application once again if we have the blocks if we have any ID after that after this if we just click on the get then you can see now we are seeing the exact URL which is the localhost 3000 API block this ID and after that now what can we do we can just split that over here we can use the split method from the array and instead the split we can split everything with the blocks so we can just split this part over here the blocks over here and then what we can do so we can grab the first element from there I think the development server has been closed so we can just get the first parameter from there so with the help of that we'll be getting that ID and after we get that ID then we can move on we can have the const pick another post that should be equals to become the get by ID get post bytes ID and then we can pass that ID over here and then we can just take a validation like if we don't have the post then we can just move on and if we have the post then we can have the return statement that should be equals to we can have the next again we can have the next response dot we can have the Json over here in which we can have the message over here like this we can have the message that can be the okay and then we can send the exact post as well that we currently have we can set the status as well that should be the 200. so that's how it will work and if we don't have the post then what we'll be doing so we can just move on we can have the Json that should be message we can have the error we don't need to send the post because we don't have any we can send the status of 404 so that's how it will work and we don't have the track as a block here so we want to implement that as well so we can update try catch over here we can have the trial we can actually catch and I said the catch if we get an error then we'll be sending the error and now we want to move all of this code inside the drive we can just cut that from here we can paste that here and now inside the catch if we are getting the error then we can again send the error over here and then we'll be sending the error like this the status can be the 500. so if we save and if we move on to the application so here you can see now we won't be having any data because now we restarted the server so now we want to move on and now we want to create a couple of more blocks so we can have the post we can have the my second post as well and then we can be my third post as well we can have the mythard post we can click on this send so if we make the get request so you can see now we have some data we have the my second post now we have the my third post and now let's just move on let's just have this ID over here so now let's just get my second post from this ID so we can have blocks like this ID and if we just click on the send then I think we are getting the error I think we just log that ID over here if we just log that ID so let's see what happens so if we just click on this send we are getting the exact ID maybe if we just move on and if we just click on the post once again because now we are making another URL if we just click on the post if we just click on the send you can see my third post has been created and my second post has also been again created and if we just get this ID over there we have this ID over here we have the get request if you just click on the send then you can see now we are getting the exact data so you can see with the exact ID now we are getting that fixed phones because now we have changed the URL so it is restarting the server because it is compiling that route over here and if you just put and delete as well so for that we also need to create here the new data every time for the every type of request because it is restarting the server and it is compiling the page on the demand so let's move on so you can say it is working perfectly fine so get by ID is also working let's move on to the put as well so they put again you can see for the put we need the data as well from the body because we need some data so what do we want to do as the next step so you can say we are already getting the data inside the post we can just copy that over here we can just paste that over here and now we'll be having the try catch block over here as well so we can only try and we can have the catch over here as well now inside that now what do we want to do the next step so first we'll be just destructuring the title and the description from the request.json and after that what we can do so we can just move on and then we need to get the ID as well so for the idea we have this const ID so we can have the ID as well and after that now what do we want to do so here we have a function of the update Post in which we want to send the ID and we want to send the title as well which we are getting from the request.body we are sending the description as well so that's how it will work so we'll be having the update post over here and after that now what do we want to do is the next step so we can just return I can have the response or we can have here the Json so we can have the next response like this for next response or again we can have the Json over here and now inside that we can again have the message over here we can have the message that can be okay and inside the second parameter we can just send here the status again we can have the status that should be the 200 which is okay and if we are getting something inside the catch block I think we have an error over here so quotation should be closed over here and we need to close it from here so that's how it will work now inside the catch block now what we'll be doing so we need to send the error so we need to send here so if we save and if we move on and if we just move on if we just make that request for the put so let's just compile that put page so you can see we have the error and now let's just move on and let's just create the post request once again so we can have the post request of the my stacking post so let's create that post and that can be my third post like this so we have this post over here and now let's see that if we have the post if we just click on the send for the get request so you can see now we have two posts over here and if you just click on the put we have this ID like if you want to change the my third post then we can have the my third post we can have the my last post if we just click on the send so now it should be deleted so if we move on to the get request once again so you can see now you can see now we only have the my last post over here you can see everything seems to be working perfectly fine because now we have changed this over here you can see now the update is also working perfectly fine now the final part would be the delete and after the delete now I think you got an idea that how to create the request handlers with the next year 13 so it is very easy and simple to use so if you want to try it yourself then you can try it as well so now let's work on the delete as well and let's just wrap up this video so inside the delete let's just compile the delete page because for compilation it is creating empty pages so now it is compiled so let's just move on and let's just work on the delete so again we can have the try catch over here we can just copy that content we can paste that over here and inside that we won't be needing the title in the description so we can remove that and for the update post we'll be using the delete over here so if you can either delete post over here and we only need to send the ID not the title and the description and now what do we want to do so we have the message of the okay we have the status of 200 and everything seems to be working perfectly fine and if we just move on click on the post if we just create some post once again that my again we can have the second post like this we can have the my second post and then we can add the my last post once again my last post if you just click on this send and if we just move on to the get request so you can see now we have to post over here my second and my last and finally if we just click on the delete and if we just get this ID of the my second post if we just paste that ID over here if we just click on this send so now it should be deleted so we are seeing the message as the okay but if we move on to the get if we just click on this send so you can see no we don't tap that over here and if you just get all of the blocks so I think we are seeing the empty area over here I don't know why but if you just create the post request once again so we have the post over here so if we just create another request like the my last post and my we can have the second post if we just create two posts over here with the get request and you can see it is fine and if you want to delete the my second post we have this ID over here we have this delete and if we just click on this send so now it should be deleted and if we just move on to the get request to get all of the blocks so you can see now we only have the my last post so you can see my second post has been deleted so we only had the my last post so you can see everything seems to be working perfectly fine you can see now we have completed a basic grid API with the Nexus 13 app router and then you can see it was very simple and easy to understand and easy to use so we just create the route.ts file which is a custom Handler functions we just have the dynamic Pages for the dynamic IDs and then we have the specific functions like the get where they put where they delete so with that step you can see now our application has been completed so it was very nice meeting all you guys I think now you have the knowledge of how to create the API routes with the Nexus 13. so congratulations on completing that so please select the video if you found this content helpful and please comment as well if you found if you found any error or if you want to appreciate me so that's it for this so let's wrap up this video

Channel: Indian Coders

Views: 11,434

Keywords: nextjs 13 crud api, nextjs 13 api, nextjs 13 api with app router, create basic api with app router, nextjs basic api, nextjs rest api, how to create api with nextjs, building api with nextjs 13.4, nextjs tutorial, next.js for beginners, next.js api, next.js api tutorial, next.js app router, next.js app router api tutorial, next.js api with app router, next.js crud api, next.js simple api with app router, next.js app, next.js, next.js rest api, rest api with next.js

Id: O-NGENb6LNg

Length: 29min 4sec (1744 seconds)

Published: Sat Jun 03 2023