Next.js 16 으로 첫 풀스택 앱 만들기

"Next 가 뭐고, App Router 가 뭐고, 서버 컴포넌트는 또 뭔데?" 라는 질문에 코드 한 줄씩 답하는 강좌.

누구를 위한 강좌인가

• React 기초는 알지만 Next.js App Router 가 처음인 분
• 백엔드 없이 풀스택 앱을 만들고 싶은 분
• DB 연결까지 한 사이클 끝내보고 싶은 분

다 끝내면 만들어진 것

• Server Component / Client Component 차이를 코드로 이해
• API Route 로 외부 호출 받기
• Drizzle ORM + PostgreSQL 로 데이터 저장·조회
• 배포는 Fly.io 또는 Vercel

단계 구성

1. 프로젝트 셋업 — pnpm create next-app + Tailwind v4 + TypeScript strict
2. Server vs Client 컴포넌트 — 'use client' 의 의미, 데이터 fetch 위치
3. API Route + Drizzle ORM — /api/posts POST/GET, postgres 연결
4. 배포 — Docker standalone 빌드, Fly.io 무료 플랜 배포

각 단계 20분, 총 90분.