Making Websites With #Next.js And #Strapi - [03] - Fetching Data

now we are going to fetch the data for our website we are going to learn how to use env files so that we can set up global variables and then we are first going to display that data and style it a little bit so it doesn't look hideous [Music] so let me just talk a little bit about the requirements for this video so first of all you are going to be needing strappy and if you don't have it already set up you can check out my strap video and we are using the exact same setup that we did there the strap is going to be on the localhost 1 3 3 7 this is our API that we are getting from it of course you are going to be reading the next J's app that we created in the previous two episodes and I would also suggest that you check out my react twenty20 series where we covered the basics of react so first of all we just want to create that env file and in that file we are going to define the path to our API now we are doing that because when we push our website to the server of course the path to the API is not going to be the same because as you will see in this episode we are going to be using the localhost API our API when we push it to the server is going to live somewhere on the internet so we are going to have a different data and we file on the production server then we have on our development machine and that is the reason why we are creating dot env files because we don't want to go into our application when we want to push it to the server we don't want to go through all of our code and change the paths to our API because we are going to be calling the API several times through our application we need to install that and plugin so that we can use it in our next JSON file so we are just going to do NPM install dot and ok now that we did that we can go to our code editor and create that envy file and you're going to create it in the root of your project and now in it we are just going to define the path to our API so it's going to be HTTP localhost 1 337 or leat save it now this is not going to work all by itself so we need to make some changes in our next dot config dot JS file so first of all we are going to require that n that we just installed so required at the end come fig and now in module exports we are going to define an object and in it we are going to define our API URL through the process as you will see so like this you define it API URL process that n dot API URL so now with this we are going to have access to the variables that we define in dot env file of course those variables don't have to be just the path to your API they can be any sort of data that you will you are going to be needing throughout your application so any kind of global variable that is going to probably be used in your application but for now we are just going to be using that API URL for fetching our data ok so once we did this so we define our variable we set up our next config dot JS file we need to restart our server and start it again for these changes to take effect so I'm just going to control C out of this and then I'm going to run my server again now it's time to fetch our data and for that we are going to be using isomorphic unfed so we need to install it so you just do npm install isomorphic on fetch like this press enter and wait for it to install ok so once this is done we now go to our code editor and we think about where we want to catch catch the data so we want to display the list of movies on our front page and since we are doing a service a server-side render DEP we are going to fetch our data on each request so whenever somebody gets to the page age that they want to see we are going to fetch some data from our API in this case this is going to be our home page so we are going to go to index data J yes and we are going to try to fetch that data right here so how do we do that we are going to do that through a special quote-unquote special async function called get server-side props that are going to get all of our data and then when the data is available for displaying then the server side is going to render our page to the user as of the newest version of next yes so just check out if you are using version at least 9.3 of next yes there are few methods for doing this so one is get server-side props and there are two others so you can also use get static props so you would use get static props if you are building a statically generated site you would also use get static paths if you are using static generation and pre-rendering but we are using server-side rendering so we are going to be using get server-side props but as I said these are the new features from the newest version of Nexus so at least version 9.3 before that you only had get initial props and as as it says right here it's recommended to use either get static props or get server-side props if you are using next yes at least version 9.3 so we are going to be using this get server-side props okay and to use it you just go to your index dot JSP and below your component you would define that function so to define that function you just do export async function gates get server-side props great now that we did that let's define our API URL since we defined it in our dot env file we can do it like this so we just this structure dot m and you will have this API URL variable available now to you so now we want get everything from our API slash movies so if we go to that address in the browser we would be getting our API data and we are going to be catching that data using fetch from isomorphic on fetch so first of all we have to import it into our index dot JSP file right here and now we want to get everything from our API URL slash movies so we are getting that response we are defining variable res we are waiting for fetch to finish and get our movies and then we want to get the data in JSON format so we are defining our data is going to be await res dot JSON and now we just want to return that data as props so we are returning props and improves we are defining movies object and to that object we are just going to add our data and now we should be able to access those movies in our component and to access them we do this so I'm just going to save this go to our component so home component we are just going to actually make it a little bit different so as you can see we are getting these braces right here but actually we need curly braces because we are going to be returning this and before that we want to call so logout our movies so this is not going to work but something like this is going to work for us and now we want to console log out that those movies to do that we are going to destructure them first here or we can do it just props and then we can console.log props that movies or we can just do this movies and then we can cons log out movies ok save this and check it out if it works okay so we refresh the page and if go right here I'm going to make it a little bit bigger as you can see we are getting three movies Inception big lebowski and Goodfellows great so we fetch that data it is coming to our components it is coming to our home page now all we have to do is display it and make it look at least kind of nice of course now to display the data we can just do something like this we can remove this is our front page and go through the movies and just display them on the front page kind of like this right so we could do something like this we are just mapping through movies we are defining this D right here and in that div we are displaying the movie title for example if I save this go to my home page as you can see we are getting Inception Big Lebowski and Goodfellas great of course we are getting this warning right here because when your mapping through something you should have a key property which we didn't define we are going to define it later because we are not going to be doing this this way of course since we don't want to display the movies like this we want to display them through another component so we are now going to define a component which were just going to call card we are going to have a card component for example and we are going to create that card component in our components directory so you just go to components new file and we are going to create card dot J's and in it we are just going to put some scaffolding for our component we are importing style from a motion styled like we did in the previous episode so please check that out if you don't know what's going on here we're defining our card component then we are returning card styled from here because we are going to be using that so that we can style our component in here we are destructuring our props and we are getting the movie prop from it so that we can now use this to display the title of our movie for example like this so if I save this right now we want to display all of our movies in those cards we can now go to index dot J's and first of all import our card component like this so important card from components card and now here in cell instead of this div we are going to define our card component and then we are going to pass in the key the key is going to be movie that I D and the movie is going to be the movie variable that we define in our map function and that's about it let's just save this and see if it works so if I save this go to our browser we are still getting the titles of our movies but now we are not going to getting any warnings or errors because we define that key that react was burning us about so all that is left to do right now is just to style our component a little bit and to better display our movies first of all I'm going to define API URL process that F so we are going to destruction process F to get API URL you're going to see why we are doing that in just a second so now in here I'm going to define a poster so I'm defining a div with the class name of poster in it I'm going to add image tag and that image tag is going to take this API URL plus movie that movie poster dot URL why we are doing this it this way let me just show you so if we go to our browser check out what we are getting from our API if we go to any movie as you can see movie poster is right here and that movie poster has a URL of uploads and then the name of the file now it doesn't have the absolute URL to your image so the episode URL would be localhost 1 3 3 7 uploads and then the name of the image so that's why we need to have this API URL that we define in our env file so that we can get those images so if I save this right now check it out as you can see we are getting the images of our movies there are a little bit big right now but we are going to handle that with the CSS so the next thing that we want to do is define the body of our movie and in that body we want to display two things so we want to display the movie title and the movie description so the movie title is pretty easy to do so we just have for example on h3 tag and say movie that movie title we already did this but the description what we want to do with it is we want to dangerously set innerhtml for the description because we don't know what type of data we can be getting from our API so for example we can even get some formatted edged HTML data so we want to do something like this so we are opening up a P tag and in it we are setting dangerous Lissette inner HTML we are getting that HTML and setting it to be movie that description okay and that's about it so if we save this go to a browser as you can see we are getting our images we are getting our titles and we are getting our text for each movie now let's just make this a bit prettier with some CSS we I'm not going to go line by line in CSS I'm just going to copy it in because as you know we rarely deal with actual CSS in these episodes and in this series and as you will see the CSS is pretty easy to comprehend so I'm just going to paste this in here this right here is going to style this card styled element and then in it we have boring h3 and P tags if I save this right now go to our page as you can see now it looks like this okay so this has been it for this episode remember everything we did here will be available for you and get help the link will be in the description below and as always thank you guys for watching and I will see you in the next one [Music]

Channel: Watch and Learn

Views: 23,673

Keywords: strapi, nextjs, react, tutorial, javascript, data, fetching

Id: Xwchwt8TIpk

Length: 15min 26sec (926 seconds)

Published: Sun Apr 05 2020