Full Project-based Tutorial - React + Next.js

Опубликовано: 08 Ноябрь 2024
на канале: Thu Nghiem

49,613

1.4k

If you want to learn to code by building real-life projects, this tutorial is for you. Together, we will build a complete application (Work Ranks) using React and Next.js.

📖 You will learn:

Data sorting, filtering
Responsive Layout without any CSS framework
Dark/Light Mode
Server-side rendering
Deploying with Vercel

🍜 Download Resources:
https://devchallenges.io/learn/tutori...

API: https://restcountries.com/ (Api changed from https://restcountries.eu)

Source Code: https://github.com/nghiemthu/world-ranks
Live app: https://world-ranks.vercel.app/

_________ 🔖 Tutorial Structure _________

[00:00] - Introduction
[01:37] - Setting up Next.js project
[06:00] - Build Layout Component
[10:25] - getStaticProps
[12:30] - Build Input Component
[18:40] - Build Country Table Component
[27:10] - Sort Countries by state (value and direction)
[38:47] - Filter Countries by Name, Region and Subregion
[41:46] - Dymanic Route in Next.js
[43:47] - getServerSideProps (Server Side Rendering)
[45:43] - Styling Country Page
[1:11:52] - Build Responsive Layouts
[1:29:51] - Build Dark/Light Theme Switcher
[1:36:42] - Create new Github repo and deploy to Vercel
[1:39:15] - getServerSideProps and getStaticProps/getStaticPaths
[1:43:01] - Happy Coding!

_________ 🐣 About me _________

I am the founder of https://devchallenges.io/
Follower my Twitter / thunghiemdinh
Join / discord