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/

📖 You will learn:

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

🍜 Resources:

• Design: https://bit.ly/3l1aH3D
• Resources: https://bit.ly/36p79SX

• API: https://restcountries.eu/

• Source Code: https://github.com/nghiemthu/world-ranks

✨ 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 __________

• I am the founder of DevChallenges
• Subscribe my Youtube Channel
• Follow my Twitter
• Join Discord

Comments

[Thinh Nguyen]

Awesome course, thanks

[Thu Nghiem]

Thank you :)

[CAYDE]

Nice

[Adegboyega Oluwaseyi]

Nice work bro

[Thu Nghiem]

Thank you :)

[killua (he/she/they)]

awesome course! checking this out soon.

[Fajar Siddiq]

Awesome!

[Thu Nghiem]

hehe thank you Fajar

[Xuan Nguyen]

Great work (y)

[Andreas Lautenschlager]

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

[Thu Nghiem]

Looks good @Andreas

[MD Tuhin Hasnat]

api does not work anymore i think