1. 시작하기 (Getting Started)#

Next.js App Router의 기초를 익히고 프로젝트 구조를 직접 구성하는 입문 과정입니다.

학습 목표#

• create-next-app을 사용해 최신 Next.js 프로젝트를 생성하고 기본 구조를 이해합니다.
• App Router의 레이아웃 시스템과 Server Component, Client Component의 차이를 구분합니다.
• 데이터 페칭, 변이, 캐싱 및 무효화의 기본 동작을 실습으로 익힙니다.

추천 학습 순서#

• 1.1 Installation: 새 프로젝트 생성 및 환경 설정
• 1.2 Project Structure: 파일 및 폴더 구조 규칙
• 1.3 Layouts and Pages: 중첩 레이아웃과 페이지 라우팅
• 1.4 Linking and Navigating: 클라이언트 내비게이션과 prefetching
• 1.5 Server and Client Components: Server Component와 Client Component의 경계
• 1.6 Fetching Data: 서버에서 데이터 가져오기
• 1.7 Mutating Data: Server Actions를 활용한 데이터 변경
• 1.8 Caching: Next.js 캐싱 메커니즘 기초
• 1.9 Revalidating: 캐시 무효화 및 데이터 revalidation
• 1.10 Error Handling: 에러 바운더리와 예외 처리
• 1.11 CSS: Tailwind CSS 및 CSS 모듈 스타일링
• 1.12 Image Optimization: <Image> 컴포넌트 이미지 최적화
• 1.13 Font Optimization: next/font를 통한 웹폰트 최적화
• 1.14 Metadata and OG images: SEO 및 소셜 공유 메타데이터
• 1.15 Route Handlers: API 엔드포인트 구축
• 1.16 Proxy: 리라이트 및 프록시 설정
• 1.17 Deploying: 프로덕션 빌드 및 배포
• 1.18 Upgrading: 최신 Next.js 버전으로 업그레이드