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 __________

Discussion (11)

Collapse
cayde profile image
CAYDE

Nice

Collapse
maxiqboy profile image
Thinh Nguyen

Awesome course, thanks

Collapse
nghiemthu profile image
Thu Nghiem Author

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 Author

Looks good @Andreas

Collapse
fajarsiddiq profile image
Fajar Siddiq

Awesome!

Collapse
nghiemthu profile image
Thu Nghiem Author

hehe thank you Fajar

Collapse
nguyenthanhxuan profile image
Xuan Nguyen

Great work (y)

Collapse
metrolenex profile image
Adegboyega Oluwaseyi

Nice work bro

Collapse
nghiemthu profile image
Thu Nghiem Author

Thank you :)

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

awesome course! checking this out soon.