REST API in Next.JS 13.4 and mongoDB

hello and welcome to the channel in this video I will create today's apis by using route.js file which allows us to create custom request centers for our given round here I will build a cloud application but I will not be using server actions and won't write any client-side code on the server instead the fountain will be to delete client side and there will be segregation of client site and server side code the base will be mongodb and I will use xcos to make HTTP request first let's create a Next Step by npx create Next Step editors I will use JavaScript instead of typescript and the rest of the option said yes then install Mongoose and xeos now let's start the application by npm rounded before I start hitting the API routes I will create a model of the schema for a database the database will be a list of smartphones in stock your prices Brands and quantities so in the app directory create a folder called model and inside it create a Javascript file called product.js to build the schema import Mongoose then declare and initialize a new schema called Product schema by new Mongoose to schema it will contain the values for name brand price quantity and date so I will put name type string then there will be the brain which can be a type of string and then price and render data at which the record was the NT was made okay let me also put the quantity of items since next renders the model only once we will pass an empty object to Mongoose thermometers this way it won't be throwing any errors and then export a model module.exports is equal to mongoose.net within commas products product schema to connect to the database I will create a separate JavaScript file called dbconnect inside a directory call use the file will export a default function that connects to the mongodb and then I will import and call the function whenever it will be needed so let's first import mongoose equal to require mongoose and then export default function this function will have to be asynchronous DB connect then await store connect mongodb localhost or so now you can you should put texture IP address or localhost there is 127.00127017 and next products will be the name of the collection also all right use new URL password is true use unified topology will also be true save the file next is uses a file based routing system where folders are used to define different API routes which is similar to defining routes for different pages let's create a folder called API inside a folder I will create another folder called Product out and this folder will contain a file named cloud.js so the name of the route will be product route and like paste.js file which serves the UI for the web page the router.js file will start to API endpoint if you go to the next.js 13 documentation and click on the file convention under API reference and then go to router.js tab here you will see the code for different HTTP methods since I am using JavaScript I will select JS and copy the post method in the router.js file now I will return a response message as post but index.js13 we have to use next response which is an extension of native request interface so I will import next response from next server any place response with next response in order to test the end point I will open thunderclient make a new request you can use Postman instead of 100 line if you want to enter the URL as HTTP colon double slash localhost colon 3000 slash API slash product out select a post method and click on send you will receive the response pressures and the endpoint is working now let's get into the database first import a mongoose model products then import the DBA connect function and call the function to connect to the database inside a post method declare the name brand price quantity and then the structural digestion data sent along with a request equal to new product and William braces entered her name brand price and quantity now save the product of it new product.save which is a mongoose function now in case of post I will add product saved and save it to create a record in your database go to thunderclient under the body type click on Json and enter the details of a smartphone I will give the name Galaxy m04 by Brandy Simpson and the price is rupees hit 30.99 and let's say the quantity is 12. now let's click on send I think there might be an error yes just would be a comma here press send again okay the product is saved we can also save internet memory with compass If the product is present or not yes it is here so the put so the record is saved in order to get at a course on a database We Run The get function in the same cloud.js file export a scene function get request and in the function block declare a variable called Product which will store all the records products don't find is a mongoose function which detects the product collection from the database that we will turn the variable session Let's test the endpoint make a new equation underclined copy and paste the URL then send a gate request and it's working see stop and delete operations will be performed on individual items we will be using Dynamic routes Dynamic API routes are created in the same way as Dynamic pages we will have to create a folder for the dynamic route and place the layout folder within square brackets and inside the folder there will clear out.js file which will contain the update and delete endpoints so let's create a folder call ID with square brackets and inside it create a file called outages one more thing one route folder cannot contain more than one Dynamic route in this router.js file I will import the products model and the big connect function call the function to connect to mongodb also import next response now create an endpoint for put request and send the message let's test the endpoint I have also added a few more products to the list let's copy an ID from one of the products and make a new request enter the URL and enter in paste the product ID select port and click on send and the input is working now we declare a variable call ID which will contain the requested URL we can see this by console logging the variable what we need to do is to get the last part of the URL which is the ID now if we split the URL which is a string by its lashes and console log it again we will see that he gives an array of strings and the Sixth Element in that area is the ID so we will type the fifth index of the area where Cadets should be given where it is still we learned about this technique from a similar video in the YouTube channel called Indian coolers the front pane will send up the date information in the formal Json data similar to post request so I will just copy and paste it over here then indicate a new variable updated product s not find by ID and update is amongus function that text in the ID of the record is the first argument and a new values that's the second argument and I will send the next response the updated product in the message now in that hundred client quarter put request I'll be sending some data user registration data so I will just head over to the gate equation copy the first entry and paste it in for the body position body then along with the name I will just add crystal blue color and send it okay I'm receiving the message let's go to a check request and get requests and check it out again okay and the podcast is working here I will have to paste the base at the end and in place of put request I will write product updated send it again okay so the put is working now for a delete it is nearly same as put request here ildp director ID in the same way as the put request and then cons deleted product equal to a weight products Dot find by ID and delete this is again among us function then I will pass in the ID and return the next response next response dot Json message product deleted and the deleted product save it now let's create a new request foreign get request and I will copy this ID for the Vivo request ID and trade select delete and then send the request okay the product is tilted you can also check it in the gate request also Okay so until now data is all about the creating this list apis now I will Design the UI for the front end I will just head over to paste.js file and I will first of all use simplifier purely client component so I will use client so that I can use create and it's hooks like you still in use effect and also I will be able to use add event signals like on click and on since so this is nearly same as older versions of nexjs or using react and node.js so first of all let's create a form this should be for the product name then the input text name will be name idlb name and please hold down your smartphone and last name I will give the input Fields shadow s 500 without 75 percent it's 10 height of 10 and padding of two and the outline will be known when it will be entering the details let's say in this area system a little bit more then I will copy the input field place in the next one and this one before the brand the same thing again for the price also and lastly for the quantity save it let's check it again okay so let's remove the labels I don't think they're necessary and I will also remove the boiler CSS let's add another button now preparing up to background color of orange 500 on over the cursor will tend to put turn to pointer which seems to read and text will be white submit just give a break foreign state be a string copy and paste it three more times next one will be for a brand and then it will be for the price the last one will for the quantity now let's declare a function and then submit to make the post request yes of course product of the subject will take the order name brand price and quantity and I will send it along with the excuse post request also import xeos and navigate CEOs dot post and here just can write in just API and the name of the route folder product route or you can also write if you want to look a loss beginning of the URL and then the product object and then it will send the alert that I posted save it now let's add some answers if any centers then even set name e.target or below copy it and paste it and for brand set blend for Price set price and at the loss order quantity then one click call the function and then submit okay let's try it now I will iPhone 6. Apple rupees twenty eight thousand one Thirty dd6 submit okay let's check it send the send request here it's the form is working now though display the products I will declare a function calls get attacked scale of a sink even a reset our trackers block s responses you can do away next year's third kit and send the URL CPS slash for the cloud s even before right anything I will declare a new state product ID this area will contain the aerial production by the sending the request sending the response cons product [Music] today products then set up the cash flow and needle I will console lock the error if there is any then I will call the function now to display the products last name give it a margin octane all around it and productivity dot map elements return and set up a list even Ally instead of a flex basis of one individ 5010 clicks and justify between and the unique key will be the ID of the element name and then filming dot print any window price element dot quantity and the last one will be the options it will delete and the edit buttons background orange 500 text White will be delete the next will be update okay see if it doesn't try to display it okay it's not working something is wrong these two products okay the display items are working I'm getting everything let me just give a margin between 0 margin at the bottom export update I will be using the same phone or before that I will just make another entry here I didn't enter the quantity so in the update function I will try to update the quantity of the Motorola so 14 what I will do I will use the same form but there will be two buttons here one the submit button will be visible by default but update button will not be visible when I click on the update button means turn on the display form not the form the items it will display the hundred button and populate the form with the details of the product that we that I want to ID update foreign and I will update the states with the info for the imported product that I want to update and I will set the visibility to true and I will also declare a new state that is your product ID now here I will set the button todinary operator the visibility if the visibility is false it is pretty cheap it is true I will display the update and vice versa we handle update and I will pass in the name brand price and the quantity of the product in the handle drawing an error it's feeling the visibility also on click available now call the function here LED thank you now let's declare the functional submit we handle update you can always think this will be same as the creating new products or submitting the products so I'll just copy and paste it here okay in case of post it will be put and I will pass in the ID for the product and I will use template little create the product ID at the end of the URL and this report straight [Music] in this place is already burst okay straight again and with the handle upgrade and sorry handle detail to pass into name brand and price so this will be element.name Dot brand Ed Enterprise and quantity also the ID of the record and in the handle up there we'll pass in the ID see we can try it now it is not working because this will be product ID yeah we'll just try it again okay just finish working let's try another one yeah it's working now for a delete operation I will create a function comes delete and I will pass in the ID of the product tester argument and make a delete request access to delete and just copy and paste the URL from here and then I will send the alert this Pro deleted save it and in the delete button I will call the function and press the element.idast argument okay done list right now so we will delete the product okay it's working so thank you for watching this video and I will see you on the next one

Channel: Dhriti

Views: 100

Keywords: REST API, NEXTJS 13.4, CRUD, MONGODB

Id: 1SQ9J8wxpZI

Length: 37min 48sec (2268 seconds)

Published: Mon Jul 03 2023