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] 셋업 ──▶ [2] Server / Client 분기 ──▶ [3] API + DB ──▶ [4] 배포

같은 프로젝트 하나가 4단계를 거치며 "빈 폴더 → 화면 → 데이터 → 인터넷 공개" 까지 갑니다.

단계 구성

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 무료 플랜 배포

앞 단계의 코드 위에 다음 단계를 쌓는 구조라, 4단계가 끝나면 같은 프로젝트 하나가 배포까지 도달합니다.