Populate A Next.js Application with Data using Async/Await
In this lesson, we will populate our application using data from the Google Blogger API to render a series of cards for each blog post. We’ll leverage async … await functions to promote the use of modern, clean-coding patterns and we’ll also see how easy it is to customize Next.js’ webpack configuration by using Webpack to hide BLOGGER_API_URL and API_KEY as environment variables.
Instructor: [00:01] Inside of this next.config.js file, we're setting up some environment variables using web pack and .end. At top of the page, we're using .end config method which is going to allow us to load our desired environment variables.
[00:19] Following this, we're just defining this web pack instance so that we can create our environment variables for our blogger URL as well as our API key. These values are going to be pulled from our .end file. This file is just going to hold any information that we want to secure as basic key value pairs.
[00:43] Inside of our project, we'll be able to use these variables to make calls to the blogger API. Now to do this, we can use the isomorphic-fetch library. By importing like so, we're going to have access to the fetch global which we use in a minute.
[01:02] Following this, I'm going to import Material-UI's card component, specifically the card, card header, and card text imports, which we used to create a card for each post that we receive form our API. We need to get our data before we create the UI. We can do so by hooking in our index component using next getInitialProps life cycle hook.
[01:28] Since, we're using asyncawait functionality, we're going to avoid have any chain call backs. Instead, we're are going to just create this response variable, and have an await our fetch call. Inside this fetch function, we're going to pass in the URL and API keys that we set up within web pack.
[01:50] Below our response variable, I'm just going to create this data constant. This is going to store our API response, once our promise object is finally resolved. To do this, we're just using JavaScripts.json method.
[02:08] The last thing we need to do is pass the data that we receive from our API as props.index component. Now, the blogger API is going to give us our post inside of an items object. By assigning this data to the value of post, we'll be able to use it within our component.
[02:29] Now that, our API call is set up. We can use de-structuring to pull our post out of the props object. Once passed in, I'm going to iterate through our data using the map function. Inside this map, we're just going to scaffold out the cards that we want our page to render.
[02:49] We then need to give each card a specific key, and I'm just going to set that equal to the id being received. Below this, I'm just going to use the card header import to render the title that we're receiving as the card header's title prop.
[03:06] The last thing I'm going to do is just use the card text component. Inside here, I'm going to want to set up a button that's going to allow us to take users to each post. I'm just going to import the raised button component from Material-UI, and have it inside of these card text tags.
[03:31] As you could see, I'm giving our button a label of click to view post. I'm also going to set the four-width prop to true, so our button takes up all this basic can. Now, if we visit our page, we should see a nice little UI being rendered on the page for us.
[03:54] We'll soon be getting an error here, and this is because we're using next getInitialProps life cycle hook. However, the sub props that we set up inside of our Material-UI HOC is still commented out.
[04:10] Now that's fixed we can visit our page and see our desired result being rendered for us. As you could see, each card is displaying the title of each post just like we set up. Inside our card, we see Material-UI's raised button component displaying our label text.
[04:29] If we interact with our buttons, we see these nice little click and hover effects already in place for us. Before you wrap up, let's just see our easy Material-UI makes the process of changing our components. Let's do this.
[04:45] I'm just going to pass in the primary prop to our button which is going to make our button render using the primary color that we've set up inside our color pallet. For me it's just this shade of blue.