Next.Js Series #2 - How to use getInitialProps to fetch external data and populate the data into pre-rendered Next.Js page

I have decided to make this Next.Js demonstration into a short series so that we can take sequential steps to dive into Next.Js topics. I shall try to make each article short and focus onto one topic at a time.

You may first read about Next.Js Series #1 - How easy it is to start setting up a simple blog with Next.js (Server-side Rendering Framework for React)? to understand the basic setup and how the "pages" folder works for routing. We shall continue to use the same project for this demonstration as well.

In this demonstration, we are going to discuss on using getInitialProps API from Next.Js. There are cases which we might need some external data, whether it is from external API or from database, to be used in our Next.Js app. Next.Js allows us to fetch data from server side, pre-render the data into HTML template. Besides, we can also call API from client side(on request) which provides much flexibility to our app. We shall talk about the server side call of an external API in today's discussion and leave the on request API call to future topic.

In order to use fetch API from the back end, we need to install 'isomorphic-unfetch' (which for client side fetch we can just use fetch() of browser, but not for backend). Just type in the following command to install:

npm install isomorphic-unfetch --save

First, we need to add an 'author.js' into our 'pages' folder.

author.js:

import Link from 'next/link';
import fetch from 'isomorphic-unfetch';

const Author = (props) => {
    return (
        <div>
            <h1>Authors</h1>
            <div>
            {
                props.authors.map(author => (
                <ul>
                    <Link href={`author/${author.id}`}>
                        <li>
                            <img  alt= {author.id} src={author.avatar} />
                            <h3>{author.first_name} {author.last_name}</h3>
                            <p>{author.email}</p>
                        </li>
                    </Link>
                </ul>
                ))
            }
            </div>
        </div>
    )
}

Author.getInitialProps = async function(){
    const response = await fetch('https://reqres.in/api/users?page=1');
    const data = await response.json();
    return {
        authors: data.data
    }
}

export default Author;

I added a bit of styling for my Author component as well and import this global css through our custom app file (we shall talk about this in depth in future).

* {margin: 0; padding: 0;}

div {
  margin: 20px;
}

ul {
  list-style-type: none;
  width: 500px;
}

h3 {
  font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}

li img {
  float: left;
  margin: 0 15px 0 0;
}

li p {
  font: 200 12px/1.5 Georgia, Times New Roman, serif;
}

li {
  padding: 10px;
  overflow: auto;
}

li:hover {
  background: #eee;
  cursor: pointer;
}

So first we have this 'Author' component, and use getInitialProps API to define the fetching external API function. The external API that we are using for this demo is from Reqres(https://reqres.in/). After we fetched the external data back, we return the data under the key "authors".

Automatically, we can use this props for our Author component. We can access by using props.authors (cause 'authors' is the key to access our return data) and render these data into our HTML template. When you navigate to your localhost:3000/author you will see the page like this:

Notice that I have used Link tag that we mentioned in last article, and refer to the author's id (the author's id is 1, 2, 3, 4, 5, 6 respectively) route, which doesn't exist in our pages folder. However, you may click on the author and the url will change accordingly to the author's page with their id as a nested route of /author, e.g. /author/1

Although we get a 404 error (because this route itself is not defined in the page folder with respective js file name), but you should realise that how easy it is to perform routing in Next.Js. We shall be discussing on dynamic routing in the next article, in order to complete each specific author page. Stay tune 😊

Do follow me for more future articles on web design, programming and self-improvement 😊