Rank, Map & Chart Covid19 Countries with Next.js

Students will learn how to use Nextjs (React framework), including working with getServerSideProps, learning what separates it from getStaticProps, implement dynamic pages, along with accessing an external API based on the latest Covid19 information to output and work with the data which the finalized application will be deployed to a website on Vercel.

Users will also gain valuable knowledge on how to work with location data, outputting co–ordinates on a map using Leaflet within our Next.js application and showing the steps required to get it up and running, which can otherwise be a hassle to figure out.

We will also understand how to use and graph data in our Next.js application with Chart.js, showing the past daily instances of infections of the past month.

We will also utilize some CSS in order to style and layout the page in a nice, clean and presentable manner.

While this tutorial is for a Covid19 website, I would strongly advise that people who are following along try to change it into something they prefer, like shoes, toys, anime, cars – anything, or even output the data in a different way – as it will help cement their learning, and fundamentally this is to get a better understanding of working with Next.js, array filtering and data manipulation, as the data itself can be used with any available APIs.