How To Fetch Data in Next.js – Part 2 Epic Next.js Tutorial for Beginners

hello you wonderful people I'm excited for our second video in our nextjs Epicor series I hope you're excited in this video we going to take a look how to build out our hero section in our landing page let's see how far we get in this video by the way this video has a supplementary blog post that you could use as reference I was going to point out but it's actually going to be the first link in the description below so if you see me typing and you need a code snippet check out that blog post but but without any Ado let's jump right into it this is going to be our part two of our epic nextjs course if you missed the first one I'll make sure to link to the video here above you could also check out the previous article that we wrote and as you following along the video I am releasing these block posts to make sure that you have supplementary content or if you see me type something and you're not sure where to find the code Snippets you'll be able to use the reference article here as reference and if you you miss the project you could check it out on our repo if you take a look under the branch and here in the main you will see the current changes up to the date of the tutorial but you'll be also able to see the individual changes that we accomplished based on the tutorial so today before starting the course I'm going to make sure to create a new Branch for us to continue so let me go ahead and do that first so I'm going to create a branch called O2 lesson hero section sounds good and I'm going to check out that branch and I'm going to say get push up origin O2 hero section so this way when we take a look at our repo we're going to see we have the newly created Branch where all of our changes are going to go in today so I'm going clear my screen I'm going to CD into our back end and run yarn develop so we could see where we are then in a different tab I'm going to CD into our front end and I'm going to open it in vs code and I'm going to start our project to see where we left off so taking a look at our project not eventful at all and if we take a look in our source code app inside page this is where we getting our initial data and we're just showing the title and the description and that's coming from our strappy application and and since you're not using this button let's go ahead and delete this import for now so this is what our hero section looks like so the first thing we want to do is structure our content and strappy we're going to start by building out this component as you could see here we have our background image which is going to be our image we have our summarizer videos which is going to be our heading we have save time and get key points from videos which is going to be our subheading and then we have a link so now let's take a look in strappy how we could create a component to represent this data so here in strappy there's many different ways to represent our content if you look at our content type Builder we could create a new collection type when you have let's say a post users data products many items of you could represent with a collection you also have our single types for instance we have our homepage so our homepage currently just has our title and the description we want to add another section to be able to represent our hero section and our feature section and we could accomplish this by creating a dynamic Zone but before we could do that let's create our hero section component in strappy to represent that data so let's go ahead click on create new component and we're going to call it hero section we're going to add a category here called the layout since it doesn't exist click on create layout and click continue our hero section is going to have our our heading text let's make it short text and add another field again let's use our text field and this is going to be our subheading and we're going to make it long text add another field and finally we're going to go ahead and add an image which is going to be our media we're going to call it image and we're going to go to advaned settings make sure that we only allow images and back to our basic settings and since we're going to have one image let's just click single media and click finish taking a look at our view you see that we have this link button we could actually create another component for our link so let's do that now we could either continue it here or we could click save and click create new component and do it this way as well so I'm going to call it the link and we're going to create a new group called components click create and click continue our link is going to have a text field we're going to call it URL and it's going to be short text next we're going to add another field against is going to be a text field we're going to keep it a short text and we're going to say text and we're going to create another field and it's going to be a Boolean and it's going to be called internal for instance is the link internal to our website or is an external Source like YouTube we want to be able to tell the difference and I'm going to go to advance settings and for for our Boolean field we're going to mark it as false by default and click finish and save finally let's navigate to our her Section component and let's add our link we're going to create add another field we're going to go down to our components we're going to say use existing components and click select component we're going to just have one link on our hero section so let's select single component we're going to give it a name link and we're going to select our component and click finish make sure you save your data so now our hero section has our heading subheading image and our link great we are able to store our data but how do we use this in our page so let's take a look clicking on our homepage we're going to add another field and we're going to select Dynamic zones this will allow us to select components that we want to include we're going to call the blocks and click add component to the Zone we're going to say use existing component and we're going to select our hero section and click finish now as we save we're going to see that our homepage now has our title description and our blocks now before continuing let's go to our content manager on the homepage and add our newly created hero section I'm going to say her section and for the heading I'm going to say epic next and subheading I'm going to say you are all are awesome cuz you are and for an image I'm going to find an image on my computer that's random why not add the image over here section click upload and finish and finally I'm going to add a link and we're going to make this link take us to our login page and click save so now let's test out our endpoint to make sure that we're getting our data I'm going to go into settings under roles under public I'm going to make sure that our homepage has the fine permission enabled let me zoom out just a tiny bit and here we could see the endpoint to which we want to make a get request to see our data I want to make sure that I save first so I'm going to go ahead and make a get request to our endpoint and when I click Send norce we have our data but wait we're not getting or seeing our blocks or our hero section what could be happening here so when using stra so when using strappy when we take a look at our homepage data any first level fields or top level Fields you get by default that's why when we make an API request we're getting our title and our description but to get the rest of the data to make sure that we don't impact performance we have to tell strapp exactly what we want to get so we want to get the blocks and that will automat automatically return the first level Fields here but we also want to populate our image and our link and we could do this with our populate flag you can learn more about in the docs but we're going to use our Dandy query Builder tool that we have here on our strappy docs website here I'm going to say that we want to look up our home page endpoint and I'm just going to clean all this up and we're going to go ahead and write our query so what this says I want to populate my blocks and within my blocks I want to populate the image and only return the URL fields and alternative text and I want to populate all the items with the links and we get this nice LHS syntax query string that we could use in insomnia so again looking at the squarey what we telling strappy is to go ahead and populate our blocks and within our blocks populate our image and our links so now if we paste it in here and make sure there's space and click Send nor now we're getting all of our data here in insomnia now that we know that we could get our data from our strappy project let's go ahead inside our nextjs project and write a function that's going to get all of this data that can be consumed by our hero section component taking a look here at our code here that we previously wrote we're getting just our title description but we need to tell strappy that we want to populate our blocks including our hero section to help help us to accomplish this in strappy we're going to use an npm Library called Qs it allows us to take our object notation and convert it into this URL string that we could pass in our request so first things first I'm going to stop my server add the Qs Library by running yarn add Qs once the library is installed I'm going to clear the screen and I'm going to install its types add types Q us once everything is done let's run yarn def to start application again and here right above our get strappy data we're going to import our Qs library and then we're going to create a new const to hold our query we're going to call it homepage query and it's going to be that same object that we created using the strappy query Builder so I'm going to go ahead and paste the previous code here so let's take it here populate control copy and we're going to paste it inside object notation perfect and now we're going to reconstruct the base URL here and we're going to use another useful class that you could read more about in mdn Doc which is this new URL Constructor which takes a URL path the base and has additional methods that we could use like being able to pass search you read more about it on mdn but in our code here we're going to say const URL equals new URL is going to take our path and our base URL and now we are able to add a search to it which is going to be our query and here we're now able to say url. HRA and that's going to give us the full query that we need need and what you could do you could console log it to see what's going on we are also going to go ahead and console log the data that we're getting here so refreshing our front end obviously visually we're not going to see anything but under the hood we are making our request and notice how are we getting our data and if we take a look at our conso locks we getting our title description our blocks by the way did you know this little trick if you want to console Lo all the items you could do console dur and you could pass a flag of depth of null and let's refresh again and no now we're getting our complete console of all the things we're getting we're getting our title description we're getting our blocks we're getting our heading subheadings our image and our link now that we know that we're getting our data I want to show you one quality of life Improvement notice how we have data and then attributes and if this was any additional nested data that we have here is getting data and attributes and as the response get bigger you're going to have a lot of these data and attribute responses so let's add a utility function that flattens this response and makes it easier in the next video you will be able to find this code snippet in an accompanying blog post that you'll find as the first link in the description go ahead and copy the flatten attributes data function and going to go ahead add it to our utils.py here we're going to say const flatten data and we're going to use our flatten attributes data function so make sure we import it import and and it's going to come from our lib utils and we could probably use the add sign here perfect and make sure you spell con correctly and we're going to cons log our flatten data to see the changes and instead of data we're going to return our flatten data and here you could see our response we get our ID title description and a much more flatten usable response where we missing the data and attributes and just getting the data now if you go look at your front end now it's complaining because we need to update our front end code to reflect the changes that we made so here instead of doing strappy data attributes we just able to use our strappy data so now if we refresh we're still getting our data but it's just much nicer now finally let's create our hero section component so you don't have to watch me type the code on screen you could go ahead to the article that I already pre prepare to complement this video and go to the hero section component section and find the code snippet and go ahead and copy it inside our project we're going to go to our components folder we're going to create a new folder we're going to call it custom and inside here we're going to make a new file called hero section. TSX go ahead and paste in the code once everything is pasted you're going to see that we're still not using nextjs image which we'll do in the next video we are hardcoding all the data but first let's just see if we could show this component to the screen inside our page. TSX file so before adding the components let's D structure our blocks are the items that we are getting and we're going to replace this with our new hero section component which is going to get the first entry from the blocks and let's REM remove this styling perfect so now if we refresh our application we see our hardcoded image our summ of your videos our subheading and our login button so now let's go inside our hero section component and make sure that we're adding the proper data but before we do that let's create an interface for our hero section props so we know what the structure of our data looks like we going to say data and we know from our response our blocks data has an ID component heading subheading image and Link so let's go ahead and add those so we're going to say ID is a number then we have our component which is a string then we have our heading which is a string then we have our subheading which is a string then we have our image let's make another interface and we're going to say image props our image has an ID which is a number our URL which is a string and alternative text as a string so inside here we're going to say image equals image props and then finally we have our interface for link props and eventually we'll be able to move this out if this is going to if these types are going to be shared in other places but for now we're just going to do everything here and we have ID which is a n and command co-pilot we didn't call it label we called it text which is a string and let's add it here link and it's going to be our link props and finally let's replace here read only hero section props and now we could D structure our data we're going to say const heading sub image and links so we're going to come back to the image and just the second but here I'm going to do heading here I'm going to do subheading for link this is going to be link text and this is going to be link URL so now if we take a look at our hero section norce we have epic next you are all awesome log in and that's coming from our strappy application so finally let's fix the image here here so let's continue working and one first thing I want to show you here if I conso log. image notice that we're just getting the second portion of our URL but we're not getting our base URL we're going to come back to this later but for now we're just going to hardcode it by saying our image URL is going to be our local project base URL and let's append our image. URL to it and now we're able to to replace our source with the image URL here now if you take a look at the project it looks atrocious because I used an image of an image of our project image so let's replace that so in strappy here under images I'm going to delete that and I'm going to add another image let's add more assets browse files I'm just going to use a random photo that I have here click Open click upload finish save and now when we go back to our application and refresh what the heck it's not working what is the problem by default your next application is going to cach your data you could learn more about in its docs but if we scroll down we could actually opt out out of caching and we're going to do that while in development mode so what we're able to do we're able to pass cash no store prop which going to fix this in the future when we deploy our application we're going to have a web hook that's going to fire every time we update our content on strappy and redeploy our application especially for the content that is statically built but in the meantime in our page. TSX file we are going to go ahead into our Fetch and we're going to pass the following argument so now if we take a look notice we have our new image and everything's working as expected oh my gosh we're getting our hero section showing up in our application we still have so much to cover before building out our features section that we'll do in the next video we're going to take a look how to work with the nexs image component and we're also going to create our own strappy image component to make working with strappy images much easier after we build out our feature section we're also going to build out our top navigation and our footer so I excited to see in the next video if you like what we do here feel free to hit the like button subscribe or even share this video and don't forget these videos come with a supplementary blog post that is the first link in the description below and more importantly I don't know if you knew we hang out at Discord Monday through Friday 12:30 p.m. CST time so if you have any questions or just want to stop by and say hello definitely do that but with that being said I'll see you in the next the video

Channel: Strapi

Views: 2,830

Keywords: Strapi, headless CMS, gatsby, gatsbyjs, react, strapi blog, gatsby blog, headless, content management, node.js, react cms, blog tool, next.s, next js, next js tutorial, next js tutorial for beginners, next 14, getting started with nextjs, fetching data in next.js, next.js react tutorial

Id: fidoDUmKiAU

Length: 21min 29sec (1289 seconds)

Published: Tue Mar 12 2024