NextJS 14 - How to FETCH DATA, SERVER API Routes

welcome back guys uh so this is a nextjs 14 tutorial on how to fetch data or how to create your own server API I'm going to show you right now all right so starting off I am inside of my next js14 project right here this is the default project I'm going to first create a folder in here called products like that put a page in here page.js okay so here is a default products page right with a products function right here okay so the first thing I'm going to do is I'm going to grab some data from this dummy jason.com it is a website that provides a free API and it looks like this if you go to their products it's just Json data that they provide through their own API so I'm going to do a fetch on this first uh I just want to step through the basics of how to fetch from an external website first we're going to fetch this display it on our page and then I'm going to create my own API on the server and fetch it from our own server so that's the idea just so you know you can get an understanding of the fetch features and then I will do the server API so at the top of our products function here I'm going to create a con get products and let's do a const response equals fetch very basic Fetch and we're going to fetch this right here this external URL so copy that put into our Fetch and we are going to return that as a response. Json now while I'm doing this fetch I wanted to uh wait on the fetch right so we do an await but to do an await we have to make this an async okay so now this is an async and for the beginners out there you know you can make this a function if you don't want to write this short code here some people get confused on that you can do function uh get products like that and then of course this has to be an async right for the await to happen on there so you can also do that and then we're going to uh right outside of that function here we're going to do a const data equals A8 get products right because we have to call that function and of course to do an await on that in the main function here we have to make that an async as well so yeah this is how we fetch external data just think about it this page loads this fun fun loads and then we're calling it right here and then now we can iterate through that uh using the map function so data do products. map and we can just take that item and then we can output it so right here I just wrote a basic function to iterate through the products data because uh when we're fetching this it returns a product in there so that's why I'm doing data. products and we're mapping through the products uh you'll see right here see that here's the Json data it Returns the product and then all these are an array of the products in there so we're iterating through that array and then I'm just outputting the items and I'm using a Tailwinds in here just to uh wrap it all around so I'll show you how it runs right now if I do npm runev and here is our locco host products see it uh it grabbed all the data it iterate through it and I'm grabbing all of the data in here it provides images provides all that so that's the basics on how to do a fetch but we are fetching externally so let's jump now on how to create an API on our website where I can fetch this internally what do I mean by that I'm going to do a local host 3000 SL API and I'm going to now fetch data that I'll generate on our own website but I'll use the same uh Json data right here I'll use the same data on our own uh server all right so to create an API on our own server server right here I'm going to go to our app folder here right for the root let's close up this product so right in the app I'm going to create a folder called API you can create any folder that you want and inside of that I'm going to have this route so next js14 has the routes file where you can put a route inside and that will route it with um an export function of get you can also do export function push so yeah there's all of the request type functions but right now I'm going to use the get function right and uh let's make this an async cuz we're going to do some async on this as we're fetching and this is the most basic that I can show you guys right now and then I I'll make it more advanced but the most basic right now so let's do a let response equals just like that and uh you see how I'm putting the products inside of this is the same thing right here that's the same right I'm just showing you an example let's say if we query our own database to get products and then we output it in Json data but I'm just going to show you like a little short hand right here to do that just really quick for this example and then we need to return this so return response. Json and we're returning the response right here their variable so we can do a con on this too if you want I'm going to do a let right now cuz I'm going to show you why and uh let's save that so now if I call that page right here if I call it directly SL API right here the folder it's just going to run this and it's going to know that I'm doing a get on it whoops uh this should be post but there's also push and add and all that okay so we're fetching the same thing but on our server here let's run that you see that it only fetched the two items that I output in Json and since the Json data is just the same as you know it's it's linking to the external site so that's why it shows the two products so this is the most basic but we don't want to keep our API open like that right here is the API if I just go to API like that you see it outputs the same thing so I'm just fetching it from the products page and then I'm iterating through it the same way that's how we create our own API but we don't want to keep this open with a lot of the sites we like to pass through parameters so let's say we do a question mark action equals get query equals products right like that so I'm going to do this parameter so I can pass through the parameter and if there's no parameters it's going to return a um invalid response so let's add through the parameters here so the uh get function here it allows you to take in a request okay I'm just going to do um you know you can call anything you want so I'm just going to call it req for request and I'm going to do a con URL equals request. next URL do search params and then on that I can do a cons action equals url. getet a CU I want to get the um a parameter I'm trying to mimic this right here that I'm trying to create I'm going to get the a parameter so the a parameter should have a value of get uh when I pass it through and then I I need a q parameter too for a query so that's the action so let's do a con query equals url. getet Q right just like that so now I can do if action equals get then go in here and uh only do that if it's if I do a get on it then I can also do if Q query equals products then output this there we go so now it's only going to fetch it if I have these parameters but what if I don't have the parameter well now I can do a let response equals message invalid request and now I don't need this let right here I'm just setting it so um first I let that be invalid if all the parameters go through then itess the request I return that request if no parameters go through it's returning this response right here with invalid and back here since the data is taking in everything from here it's returning you know a message or that so uh in here I'll also put message and I'll make that empty if it Returns the response with a product the message will be empty if it returns nothing then it'll be invalid so let's say that and right here now I can take that that data and I'm telling it if there is a message then I'll return that so I'll wrap this around a div so that it just you can see it more clear okay so now I'm calling this API here right with no parameters so let's go back here refresh see the message is invalid request so if I go to the products page though uh the products page here you see how it's still loading it because there's caching done on nextjs so uh if you don't want it to cache and while you're doing testing on your Dev you can also pass through a parameter in here called Next and you can give it revalidate and set this to a low number like 10 or something after 10 seconds it revalidates it so let's save that and refresh this cannot read properties of reading map okay okay so uh you see it returned a message without any products in here so if I actually made this products like that then left it empty then invalid request but if I don't want to add this products in here like that then I can also uh have a question mark right here and this is saying if there's data then output it otherwise don't output anything so let's see how that runs and there we go it still says invalid because it's not going to give us an error now but you know it is good to uh leave both in here so yeah uh it's good to be clear about things and just keep everything inside and here it is if I put in the parameter you know a equals get and Q equals products then it will fetch the products here and you see it refreshed it so right there okay so now I'm going to show you how to write this without parameters to make it a little bit more clean and this is the way you should actually do it let's say we want to just call products like that right API SL products and uh I'm going to go to my API folder right here and I'm going to create a folder with a bracket Slug and bracket now remember this slug can be called anything it can be called items but I'll use the term slug because that's what's used in nextjs and same thing inside of the slug folder I'm going to create a file called route same thing like that so let's do an export async function and this term right here get it has to be uppercase like that exactly like that and it takes in a request just like before but now comma squirely bracket params just like that so now we're taking in pams so now we can say const slug equals params do slug this params right here takes in whatever we're calling right here so we have to call this slug if I name this items then I have to say items okay so it's the same thing but since I'm calling it slug we do that now we're saying if slug equals products then do whatever we need to right so let's set this up the same way here is our response with an invalid request and if the slug is products we will return the same response with the products in there and then right outside of here same thing return response. Json response so return that response again and now we're going to Route it to our slug here inside of our page so API products and it should get the same thing I'm going to save that go back to our file here refresh and it does the same thing right there so it's grabbing those two products here we go I'm going to remove one product so that it shows you it's only taken in one product there see so it is working correctly so uh another way I'll show you right here is I also like to do this if you want to be specific you can create a folder called get and then inside of that you can create another folder called Slug and then inside of the slug folder create the route so you know uh different ways of doing it and then now the API we can say get and then if I want to do a post folder in here as well we can create a post and then that Poe can have a slug with a route inside so you see how it can get you can get like pretty unique with it and then we can just call Post like that or get and then this part can be dynamic we can just say iPhone or electronics and we can pick up that slug parameter and just do whatever we need with it one final thing I will show you how to do a post in case you're wondering so we're going to go back to our original API right here if we call that through the API route so remember we have the get and and uh let's make this post so I show you how to do a post on that right and how we do that is through the uh options here we say method post and then we have a body and inside the body you can have you know any kind of data that you want okay and so we post that to the API route here and then we'll pick it up as a post and inside post we can do the same thing request and now you can say cons data equals a weit request. Json so this will get the body since we're doing a weight we have to have this as an async and uh yeah this will get the request the body that you called right here here is the body part comma there so body and it'll take in that uh request data that we're calling right here then you can do whatever you want with that data so yeah that's how you do a post and uh I will cover more on forms and posting on the next tutorial video because I'm trying to break this up so that it can just be more easy to learn and that's going to do it for this tutorial hope it helped you guys out if you want to download the full code from this video just join my patreon link in the description I'll see you guys next time koday out

Channel: Codr Kai

Views: 4,525

Keywords: next js tutorial, next js fetch data, next js 14, nextjs 14 tutorial, next js server api

Id: hpI-d39hUWY

Length: 15min 25sec (925 seconds)

Published: Sat Feb 17 2024