DEV Community

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

Posted on • Edited on

180 43

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 __________

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

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

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay