Data Fetching in Next.js - Rick and Morty REST API Tutorial

hey team today we're gonna learn how to create a dynamic web app using next is we're gonna create a character wiki for everybody's favorite cartoon Rick and Morty I'm Colby FEA and as this is your first time watching make sure you hit subscribe for future updates next I yes is a react framework that's build by the company Brazil with it you can do anything from spinning up a simple react app or if you want a static site really they have a ton of features baked right in for our walkthrough we're gonna create this character wiki for Rick and morning not only do we load in all these characters we also can load more with paginate adore API responses and we can also search for a character for one like Rick to make use of the routing from next is we can also create a page for the specific character to get started the first thing we want to do is actually spit up an app so we're gonna run yarn or NPM then create next it's gonna ask you a few questions like what is your project name I'm gonna say my Rick and Morty wiki and also ask you what template you want to use we're just gonna go with the default one for now and then it'll go through and install all your dependencies and then it'll be ready to go so first we want to CD into that directory my Rick and Morty wiki and then run dev then once we open that up we see our default template so the first thing we need for our app is the actual data and we can do that by using the get server-side props for our next JSF the data that we're gonna use is from the Rick and Morty API here they provide rest endpoints that we can use to get the data ray into our app so once we open up the code we can see our default template we have our home which is our home page and we have all the content that fills it out I'm going to get started by creating a constant at the top called default endpoint where I'm going to paste in that endpoint for Rick and Morty next I'm going to set that function so export async function get server-side props and what will actually return is a props object next we want to get the data so we'll say constant response equals away fetch our default endpoint then since we're using the fetch API will say Const data equals a weight response Jason and then we'll simply return that data as part of the props now when we return these props we're gonna make these available in our actual components so let's set up that argument Andy structure it to grab our data prop and then we can console that out to make sure it works and if we refresh our page we can see our data with our results array so before we actually start using that data I'm going to clean a little bit up so I'm going to say love a dub dub as our title let's also copy that up here and then for the description I'm just gonna say Rick and Morty wiki next for this grid let's first get rid of all the elements except for one because we're gonna turn this into a template I'm also gonna remove the paragraph because we're gonna gonna actually use that and let's just say my character just just make sure it works and finally I want to make this a little bit better for accessibility so I'm gonna turn this div into an ordered list and wrap the a element with a list item and one last thing I'm also going to move this class name to the list element now since we added a list element we want to also remove some of the default styles otherwise it's gonna look a little different so we're gonna say list-style:none on our grid element we're gonna remove the margin left set that to zero and the padding left set that's zero as their default styles on our list and if we load the page at this point we should see a real basic just one block with my character but we're gonna use this to template out all of our different characters so now let's actually use the data so I'm going to first D structure the results setting an empty array as the value in case it's undefined and Wilda structure that from data I'm also going to remove this console.log since we don't need it anymore down on our grid we're gonna use that list item to actually create a template for our different characters so the first thing we're gonna do is take our results and we're gonna create a mat and for each results we're gonna first D structure the ID and the name from result and we're gonna return this list item then we can take the name and we can replace my character and for the list item we want to add a key of that ID and if we go back to our app we can already see that we now have a list of all of our characters but I also want to add an image so I'm gonna also dis structure the image from the result and then I'm gonna create a new image tag with the source of that image as an alt I'll say name and make that say um now again if i refresh the page I can see everybody's image so it's cool that we can see all these characters but if we scroll all the way to the bottom we can see that we're only getting some of the characters in the A's to fix this the API actually provides an X key which allows us to get the next page of results to use that the first thing we're gonna do is we're gonna import use state from reacts next we're gonna rename our results to default results and then we're gonna create some state that's called results then you can update results and then as a default for the use state we're gonna use the default results and since we're ultimately using the same variable nothing should change at this point to grab that next value we're gonna destructor the info object from data we're also going to setup a new state object here we're using a new variable called page where we can also update it but we're gonna use the info data objects so that we can grab those keys but we're also going to keep track of a current property which it's gonna be the current endpoint that made the most recent request for our page that means to start the very first time the page loads is going to be the default endpoint which we're fetching on the server we want to know what that current value is so we're gonna first D structure that from our page and to use it I'm gonna copy in this code block that I'm going to walk through here we're setting up a new use effect which is using current as dependency so that means anytime the component renders and that dependency of current changes the use effect is gonna fire at the top we see if current equals default endpoint return that way since we're already loading that data on the server we're not going to try to make that same request again next in order to use a sink a weight we're going to create a new async function call request and fire that off right away then we're gonna actually make that fetch request to the current endpoint which we're storing in our state we're gonna turn it into Jason we're gonna update the page data with the next value that way we can grab the next page whenever we want and we're also going to update the results to the results of that new request and since we're using to use effect we want to also make sure that we're importing it at the top now if we look at our page again it's still not doing anything we actually need a button at the bottom called load more that way we can trigger that update so if we scroll down I'm gonna put underneath our list a new button in a paragraph that just simply says load more I'm going to tell it that on click to fire this function which we're going to define in a second here underneath our use effect we can create that new function called handle lot more where it's gonna update our state to that current value which is the next page that way when someone clicks load more we're going to use that next page endpoint update current and it's gonna make the use effect fire and now if we open up our page we can see the load more and if we click it we can now see more results so now we have of our characters that we can keep loading in but what if we want to search for a character on our page underneath the description let's add a new form we're gonna add a class name of search we're gonna have an input with the name of query and a type of search and we're gonna have a button that just simply says search that will trigger this form we want this form to look pretty decent so I'm gonna copy in this block which adds a little bit of padding to the right of the input and when it's on mobile it cleans that up a little bit and if we load this in the browser we can see our simple search input next we want something to actually happen when we submit that form so we're going to add a new handler called on submits and we're gonna add in a function called handle on submit' search which we're going to define now underneath our load more function and we can define a new one that's called handle on search submit which we first prevent default that way it doesn't try to refresh the page from the form submit we're first gonna grab the current target then we're gonna grab the fields of that which the current target is the form in this context that's going to grab the elements which is all the different inputs then we're gonna try to get the query from the fields by using the find method and looking for that query that query input we're gonna then grab the value of that field query and then we're gonna create our new endpoint which is going to be characters with a filter by name and finally we update our current to that endpoint and now if we go to our page and we try to search for something like Rick we can now see that it filters the results you can also see that if we scroll to the bottom of hit live more it's gonna add more Rick's now the last thing we're going to do is we're going to create individual pages for each of our characters that way we can actually click into one of our characters and get more information to do this we need to actually set up the dynamic graph so the first thing we want to do is under pages we want to create a new folder called character and then inside that we're gonna create a new folder and we're gonna title it bracket ID closed bracket now that looks a little unusual but that's the way that next jas is able to see that that's gonna be a dynamic value we're gonna create that and then we're gonna also actually just copy our original home page into there that we're gonna start from just to make it a little easier to work from now that we have our character page we're gonna remove a bunch of things so the first thing I'm going to do is remove you state and these effect since we don't need that I'm gonna change home to character I'm gonna actually remove everything that is above our return statement of our component and then I'm gonna also get rid of the description get rid of this form also get rid of this grid and the load more optionally you can also get rid of this footer as for all the CSS there's definitely be some stuff that you can remove but just for simplicity for this demo I'm gonna leave it as is so now if you go to your browser and you manually navigate to slash character slash one where that one is gonna be that day dynamic value we actually see that page where it just says what beloved dub dub just like our code actually has now in order to actually query for that character one we want to try to get that query value so the first thing we're gonna do is inside get server-side props is we're gonna do structure that and grab the query which will have our value and for the query itself we can they structure the ID exactly from that query now for our end point we want to change this up a little bit so the base is gonna be the same API but at the end we want attack in that attack on that character ID so we're gonna turn this into a temple with literal and then at the end we're gonna tack on that ID and then if we try to console log out that data again we can see that in our data object the character one is Rick Sanchez so now like before let's use a bunch of that data so I'm gonna D structure out the name image gender and a couple other pieces of metadata the first thing I would do is take the name and I'm gonna change both instances of a dub dub to the name and just to check that that works we can now see that our page says Rick Sanchez now let's actually show all the other content so I'm gonna paste in this code block which is gonna be called a profile where I'm gonna have the image I'm gonna have a list of character details which includes its name status and that other metadata that I'm talking about and at the bottom of our CSS I'm also gonna paste in some Styles which is going to set up the right look and feel for our profile now if we reload the page Krissy Rick Sanchez we can see an image of them and we can also see his character details now in order to get to that page we don't want to have to mainly navigate to that each time you want to actually collect the character so let's update that at the top of our homepage we're gonna import link from next link then where we list out our results we're gonna wrap that a element with a link we're gonna each ref of character and we're gonna put the brackets ID showing that it's gonna be a dynamic rap I can also get rid of the href on the agent on the ailment itself then to actually dynamically create that route value we're gonna put as and then we're gonna add that character and the actual ID and then if we open that up in our browser we can navigate right to our character now finally if we're on our character page we want to get back to the actual list of all the characters so how can we do that similar to the home page the first thing we're gonna do is import that link element again and below our profile we're gonna create this paragraph tag which has a link it's gonna simply point to the home page but it's gonna say back to all characters I'm also gonna add a few styles just so that it actually looks like a link by making it blue and adding an underline now if I look in the browser I can see my back to all characters link and I can click it and I go back to all my characters now if you follow along with me you just created a new rick and morty wiki using next-day yes not only did you create that wiki but you learn some concepts like creating dynamic routes and also how to prefetch data that renders on the server if you liked this video make sure you hit thumbs up and subscribe for future updates thanks for watching

Channel: Colby Fayock

Views: 27,832

Keywords: rick and morty, nextjs, next.js, next js, next js tutorial, next js api, next js tutorial for beginners, next js tutorial 2020, next js tutorial youtube, next js complete tutorial, next js dynamic routing, next js dynamic pages, next js dynamic routing example, next js dynamic url, next js dynamic, nextjs getserversideprops, nextjs getserversideprops example, nextjs get server side props, next js getting started, nextjs rick and morty, rick and morty wiki, next js fetch api

Id: iW39Merz0zE

Length: 12min 3sec (723 seconds)

Published: Thu Jul 09 2020