분류 Reactjs

전체 프로젝트 기반 튜토리얼-React + Next.js

컨텐츠 정보

  • 조회 291 (작성일 )

본문

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


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


Alt Text 


? 다음을 배우게 됩니다.

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

? 리소스 :

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


__________ ? 튜토리얼 구조 __________ 


[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