Learn to work with React's Next.js, while combining it with an external API to map, graph & display data about Covid19.
What you'll learn
- Learn how to use Nextjs (React framework)
- Working with getServerSideProps and understanding the difference with getStaticProps
- Understanding dynamic pages within Nextjs
- Using an external API and working with the data
- Learn how to make a map with data in Nextjs with Leaflet
- Graph your data with Chartjs
- Deploy your application with Vercel
Requirements
- No requirements. Ideally it will help a little if you know some vanilla React, but complete beginners are welcome!
Description
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.
If you have any further questions, or need any assistance during the course, please don't hesitate to contact me or drop me an email and I will get back to you at the earliest convenience.
Who this course is for:
- Beginner and pre-intermediate React / Nextjs developers. Perhaps you know vanilla React but you are not familiar with Nextjs or you are a complete beginner. Intermediates may also find the map and graph information useful too.
