Next.js

Next.js 는 React 위에 얹는 메타 프레임워크. SSR·SSG·라우팅·이미지 최적화가 다 묶임. React 와 차이 + 언제 쓰는가. 교재 1편.

create-next-app 한 줄로 Next.js 프로젝트 시작. 옵션 7개·폴더 구조·dev 서버·첫 페이지 수정까지. 교재 2편.

app/ 디렉토리 특수 파일 정리. layout·page·loading·error·not-found 의미. 폴더가 곧 라우트. 교재 3편.

page.tsx 와 layout.tsx 를 직접 손으로 만들며 사이트 골격 잡기. 중첩 레이아웃·children·메타데이터·실행 흐름까지. 교재 4편.

App Router 폴더 이름 트릭. 동적 [slug]·그룹 (group)·catch-all […all]·옵셔널 정리. 교재 5편.

App Router 의 두 컴포넌트 모델 — 서버 컴포넌트(기본)와 클라이언트 컴포넌트(use client). 정확한 차이와 선택 기준. 교재 6편.

Next.js Metadata API 한 객체로 title·description·OG·Twitter·sitemap·robots 한 번에. 교재 7편.

async Server Component 에서 fetch·DB 직호출. 병렬·순차·캐시 옵션 정리. 데이터 fetching 교재 8편.

Next.js Server Actions — use server 로 서버 함수를 폼에서 바로 호출. API 없이 mutation. 교재 9편.

useActionState·useOptimistic·useFormStatus·Zod 검증. Next.js 폼 뮤테이션 실전 패턴. 교재 10편.

App Router 특수 파일 loading·error·not-found 로 UX 자동화. Suspense·ErrorBoundary 정리. 교재 11편.

Next.js Streaming SSR — Suspense 로 느린 부분만 따로 떼어 빠르게 첫 화면 응답. 전체가 느려지지 않는 페이지 만들기. 교재 12편.