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 __________

Top comments (12)

Collapse
 
maxiqboy profile image
Thinh Nguyen

Awesome course, thanks

Collapse
 
nghiemthu profile image
Thu Nghiem

Thank you :)

Collapse
 
cayde profile image
CAYDE

Nice

Collapse
 
metrolenex profile image
Adegboyega Oluwaseyi

Nice work bro

Collapse
 
nghiemthu profile image
Thu Nghiem

Thank you :)

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

awesome course! checking this out soon.

Collapse
 
fajarsiddiq profile image
Fajar Siddiq

Awesome!

Collapse
 
nghiemthu profile image
Thu Nghiem

hehe thank you Fajar

Collapse
 
nguyenthanhxuan profile image
Xuan Nguyen

Great work (y)

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
 
mdtuhinhasnat profile image
MD Tuhin Hasnat

api does not work anymore i think