실제 프로젝트를 빌드하여 코딩을 배우고 싶다면 이 튜토리얼이 적합합니다. 함께 React와 Next.js를 사용하여 완전한 애플리케이션 (World Ranks)을 구축 할 것입니다.

라이브 앱 : https://world-ranks.vercel.app/

? 다음을 배우게 됩니다.

• 데이터 정렬, 필터링
• CSS 프레임 워크가 없는 반응 형 레이아웃
• 어둡거나 밝은 모드
• 서버 측 렌더링
• Vercel로 배포

? 리소스 :

• Design: https://bit.ly/3l1aH3D
• Resources: https://bit.ly/36p79SX
• API: https://restcountries.eu/
• Source Code: https://github.com/nghiemthu/world-ranks

✨ 여기에서 튜토리얼을 찾을 수 있습니다.

__________ ? 튜토리얼 구조 __________ 

[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!

https://dev.to/nghiemthu/full-project-based-tutorial-react-next-js-free-434l