Next.js 앱 라우터 강의에 오신 것을 환영합니다! 이 무료 강좌에서는 풀스택 웹 애플리케이션을 구축하면서 Next.js의 주요 기능을 배우게 됩니다.
이 강좌에서는 다음과 같은 기능을 갖춘 금융 대시보드의 단순화된 버전을 만들 것입니다:
- 공개 홈 페이지.
- 로그인 페이지.
- 인증으로 보호된 대시보드 페이지.
- 사용자가 송장을 추가, 편집 및 삭제할 수 있는 기능.
대시보드에는 나중에 설정할 데이터베이스도 함께 포함될 것입니다. 링크.
강좌가 끝나면, 풀스택 Next.js 애플리케이션을 만들기 위한 필수적인 기술을 습득하게 될 것입니다.
이 강좌에서 배우게 될 주요 기능을 살펴봅니다:
- 스타일링: Next.js에서 애플리케이션 스타일링을 하는 다양한 방법.
- 최적화: 이미지, 링크, 및 폰트 최적화하는 방법.
- 라우팅: 파일 시스템 라우팅을 이용하여 레이아웃과 페이지를 생성하는 방법.
- 데이터 가져오기: Vercel에서 데이터베이스 설정하는 방법과 데이터 가져오기 및 스트리밍에 대한 실습.
- 검색 및 페이지네이션: URL 검색 매개변수를 사용하여 공유 가능한 검색 및 페이지네이션 기능을 구현하는 방법.
- 데이터 변경: React 서버 액션을 사용하여 데이터를 변경하고 Next.js 캐시를 재검증하는 방법.
- 오류 처리: 일반적인 오류 및 404 not found 오류를 처리하는 방법.
- 접근성: 서버 측 양식 유효성 검사 및 접근성을 개선하는 팁.
- 인증:
NextAuth.js와 미들웨어를 사용하여 애플리케이션에 인증을 추가하는 방법. - 메타데이터: 소셜 공유를 위한 애플리케이션을 준비하는 방법.
이 강좌는 React와 JavaScript의 기본적인 이해가 있다고 가정합니다.
React를 처음 접하시는 경우, React Foundations 강좌를 통해 컴포넌트, 프로퍼티, 상태 및 훅과 같은 React의 기초와 최신 기능인 Server Components 및 Suspense 등을 먼저 학습하는 것을 추천드립니다.
이 강좌를 시작하기 전에 시스템이 다음 요구 사항을 충족하는지 확인하세요:
- Node.js 18 이상이 설치되어 있어야 합니다. 다운로드.
- 지원되는 운영 체제: macOS, Windows (WSL 포함), 또는 Linux.
또한 GitHub 계정과 Vercel 계정도 필요합니다.
Next.js 또는 이 강좌에 관한 질문이 있으면 Discord 또는 GitHub 커뮤니티에서 질문할 수 있습니다.