DEV Community

Cover image for Full Project-based Tutorial - React + Next.js [FREE]✨
Thu Nghiem
Thu Nghiem

Posted on • Updated on

Full Project-based Tutorial - React + Next.js [FREE]✨

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

LIVE APP: https://world-ranks.vercel.app/

Alt Text

📖 You will learn:

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

🍜 Resources:

✨ You can find the tutorial here:

__________ 🔖 Tutorial Structure __________

[00:00] - Introduction
[1:37] - Setting up Next.js project
[6: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 __________

Latest comments (11)

Collapse
 
killua profile image
killua (he/she/they)

awesome course! checking this out soon.

Collapse
 
maxiqboy profile image
Thinh Nguyen

Awesome course, thanks

Collapse
 
nghiemthu profile image
Thu Nghiem

Thank you :)

Collapse
 
lautenschlagerdev profile image
Andreas Lautenschlager

Thanks! I tried my Best and took your Tutorial and realized it in Gatsby with another API: cocktails.lautenschlager.de/

Collapse
 
nghiemthu profile image
Thu Nghiem

Looks good @Andreas

Collapse
 
nguyenthanhxuan profile image
Xuan Nguyen

Great work (y)

Collapse
 
metrolenex profile image
Adegboyega Oluwaseyi

Nice work bro

Collapse
 
nghiemthu profile image
Thu Nghiem

Thank you :)

Collapse
 
fajarsiddiq profile image
Fajar Siddiq

Awesome!

Collapse
 
nghiemthu profile image
Thu Nghiem

hehe thank you Fajar

Collapse
 
cayde profile image
CAYDE

Nice