Now we know how to create a pretty decent Next.js app and get the full advantage of the Next.js routing API.

In practice, we usually need to fetch data from a remote data source. Next.js comes with a standard API to fetch data for pages. We do it using an async function called getInitialProps.

getInitialProps can only be added to the default component exported by a page, adding it to any other component won't work.

With getInitialProps, we can fetch data for a given page via a remote data source and pass it as props to our page. getInitialProps needs to work on both server and client; since it is called in both environments.

In this lesson, using getInitialProps, we are going to build an app which shows information about Batman TV Shows, utilising the public TVmaze API.

Let's get started.