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렌더 경계

서버와 클라이언트 컴포넌트의 데이터·상호작용 책임을 나눕니다.

3영속성

API 입력·오류 계약을 데이터베이스 저장 흐름과 연결합니다.

4배포

빌드, 환경 설정, health 확인을 거쳐 공개 상태를 검증합니다.

같은 프로젝트 하나가 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단계가 끝나면 같은 프로젝트 하나가 배포까지 도달합니다.