API Routes with Next.js 14 — Course part 10

with next GS we can create a front end application in the folder app where we got a file rooting system every time we are going to create a new folder and had a page. TS6 it's going to create a new route into our app however if we create a folder API in here it's something different that is happening in the folder API it's going to create roots for an API so a backend server that is running on node and we can create as much roots as we want exactly like we do with um the folders under app for our client application so basically in here I'm going to create my first root it's going to be called root. TS and not root. TS6 because it's not TS6 that we want to render but just typescript and in here if you did some node GS um backend um server before you would understand immediately how it works you just create a function that is going to return actually a root etc etc but for those who don't know we are going to code this first root together so what we need to do is to export I think a function okay and here we are at the base of our API so it's going to be slash API okay um the thing is that here we got to specifi the method because when we call an API you can have several method and in here it's going to be directly inside the name of the function so here it's going to be as sync function get so next to here I got my Postman that is running and I got my Local Host SL API running and if I try to call here we see that nothing happens because I didn't code anything what I need to do in here is to return a response so what I'm going to do here I'm going to type return okay and here I need to use from next server the package of next I need to use next respon response it's going to create a response from the server directly for me so I'm going to import here next okay response so here is going to be next response there we go and here I got to import it from where from next SLS server there we go and what I need to return is this next response and actually I need to call the method gisson from this next response and let's say that at first we are going to answer hello world all right I got my first rot so it's SL API and I got my routine here so if I try to call there we go we've got our hello world let's create a sub root let's say that we're going to have a sub root that is going to be for instance um let's say it's going to be product okay well we need to do exactly the same so I'm going to type a root. TS and in here I'm going to put all of these here and we've got here let's say that in my products I will have instead an array okay and in this array I will have an ID which is ID one and the name of the product it's going to be strawberries for instance all right so what I'm going to do I'm going to come back here and SL API products because remember this is the pass we created before I'm going to click on send and there we go I got my product let's get back to the main file of our application and in here in products I'm going just to remove this um what I want to do now is not to use a get I would like to use several other methods so we've got post we've got patch we've got put well every time you want to create a new method uh through the root what you can do is just to change the name of the function so here is going to be post for instance then you will have uh let's come back here we can see we've got put then patch then delete then head then option okay so depending on the method you are going to use what you will have to do is to create every time a new function for every method that you want to use okay let's stay on post and let's see that what I can do here I'm going to try to call Post and what I would like to catch is a body so I would like to catch the request uh when I post here and what I can use for that is to use the parameter request inside the function post okay so here request is of type request and there we go so how do I catch this request well just by using this request in here so let's say that I would have some data and here it's going to be this I would await to transform my request as a Json to read the data that I got in here so let's say that I want to return the data after and what I need to do I'm going to post it's a bit dumb but I'm going just to post this object Joe age2 and it's supposed to return to me actually the object that I got in here so I'm going just to post and there we go I got my data with name Joe exactly what I posted okay so to catch the request you use the request button and the request sorry parameter and you turn it into a Json object now let's say that I would like to have a root and this root would be users okay and inside users I would have a new folder and in this folder would have a dynamic parameter exactly for the page called user ID uh in here okay so now I got a Roots API slash users slash and here what do we got user ID so let's say that I'm going to put a 12 in here and look at this I got a Json and in this Json I already have some users locally and I would like just to fetch the user that we have here gum which is number 12 so I'm going to come back in here and what I need to do is just I'm going to copy paste this and create a new root root. TS okay and it's going to be exactly the same and what I want to do I want to import my data from where from here the root I got my Json here and on the request I would like to catch the parameter is that possible it's absolutely possible so to do this what we need to do is to add here a new parameter called cont text and I'm going to put any for now and so we've got the context any and what we want to do here instead so I'm going to command this for now what I want to do is to deconstruct params from context because context is giving to us param so here what I can catch is params do user ID because we got here the user ID okay so now what I can do is to look for the user so I'm going to put data. filter hix and here I will have params Dot and remember it's the name of the the the parameter user ID is equal x. ID but here my ID here is a number and here it's going to be a string so what I need to do is to turn this x ID to a string so two string just to be sure that all the time I will be able to catch this okay so I got it and instead so what I'm going to do I'm just going to remove this in said I'm going to return the user okay so here I'm I put a post but actually it's going to be a get it's going to be better so I'm going to come back and I'm going to turn this into a get and I'm going to click on send and what's happening in here I got my user that is directly here so it's in an array I could have done a find but this is how you catch the params in here you use actually the um brackets to create your Dynamic route and then you can use the params do user ID or whatever the name you're going to give to it's going to work this way I can definely call my own API from my client side so let's come back and here on the page I got a button called call my API and I got a function called Fetch from API that is going to fetch directly my API okay and of course I could fetch any roots that will be created in here inside my app okay so I got my erors and what I do is that when I get my response I turn my response into a Json and I got my data in here so here we see that I'm trying to fetch uh API but let's create a new rout so I'm going just to use this one at users so at users I'm going to create a new rot. TS and you understood that now you will have to get actually um you would have to get uh every time a rotts file on every folder so here it's going to be data and I'm just going to respond this and actually I'm not obliged to use the request and the context be safe because here if you deploy your application this route is going to be accessible to anybody that is going to call your API okay you would have to work on the cookies and the authentification system if you want uh that your root stay private all right so we've got this and what I'm going to do directly in here I'm going to call Api SL users and we're going to look at the data so I'm going to click on call my API and suddenly I got my array with the two users that I got here so you can definitely call your own API from your frontend application for the reasons that you want but it's totally possible to create a backend side on your application in xgs and still running an application on the front end

Channel: Codewithguillaume

Views: 47,039

Keywords: course, free, code, javascript, startup, dev, nextjs 13, api routes

Id: gEB3ckYeZF4

Length: 9min 56sec (596 seconds)

Published: Sun Sep 17 2023