실무개발·2026년 4월 3일
Next.js 16 마이그레이션: App Router 완전 전환 후기
Pages Router에서 App Router로 전환하면서 겪은 것들 — 마이그레이션 전략, Server Components 함정, 데이터 페칭 변화, 그리고 성능 결과까지 솔직하게 정리했다.
#Next.js#Migration#App Router#React Server Components
개발과 기술에 대한 이야기를 기록합니다.
Pages Router에서 App Router로 전환하면서 겪은 것들 — 마이그레이션 전략, Server Components 함정, 데이터 페칭 변화, 그리고 성능 결과까지 솔직하게 정리했다.
모노레포를 쓰다 보면 어느 순간 빌드가 10분이 넘어간다. Turborepo의 태스크 그래프와 캐싱이 이 문제를 어떻게 해결하는지, 실제 Next.js 모노레포 셋업으로 보여준다.
마이크로서비스 환경에서 요청이 어디서 느려지는지 어떻게 찾을까? OpenTelemetry로 로그·메트릭·트레이스를 하나로 묶어 병목을 정확히 짚어내는 법을 실전 코드와 함께 알아보자.
Vercel AI SDK를 써서 Next.js에서 스트리밍 AI 채팅을 만드는 방법을 정리했다. useChat 훅, Server Actions, 프로바이더 전환, 도구 통합까지 실제 코드로 한 번에 설명한다.
SaaS에 결제를 붙이려고 Stripe을 연동했다. 결제 코드는 다른 코드와 차원이 다른 긴장감이 있었다. Checkout Session부터 Webhook까지 실전 경험.
서비스를 운영하면서 유저가 어디서 이탈하는지, 어떤 기능을 쓰는지 전혀 몰랐다. PostHog를 붙이고 데이터 기반으로 결정하기 시작한 경험.
회원가입 확인 이메일을 보내야 하는데 HTML 이메일이 지옥이었다. React Email로 컴포넌트처럼 이메일을 만들고 Resend로 보내는 방법을 정리했다.
REST API와 수동 타입 관리의 한계를 Zod 스키마 검증과 tRPC로 해결하는 방법을 정리했어. 라우터 설정부터 클라이언트 타입 추론, Zod 에러 처리, REST 마이그레이션까지 실전 예제로 커버해.
서비스를 만들었는데 아무도 오지 않았다. 마케팅 예산 없이 검색 유입을 만드는 기술적 SEO를 Next.js에서 직접 구현한 경험.
테스트에서 fetch를 직접 모킹하거나, axios를 vi.mock()으로 교체하다가 실제 API와 차이가 생겨 고생한 적 있다. MSW는 네트워크 레벨에서 요청을 인터셉트해서 그런 문제를 근본적으로 해결한다. 설정부터 Vitest, Storybook 통합까지 정리했다.
HTML5 Drag and Drop API로 만든 칸반 보드가 네이버 웨일에서만 동작하지 않았다. 브라우저 제스처가 네이티브 드래그 이벤트를 가로채는 문제, dnd-kit의 Pointer Events 기반 아키텍처로 해결했다.
오픈소스에 기여하려고 봤는데 README가 없어서 포기한 적이 있다. 그때 좋은 문서의 가치를 뼈저리게 느꼈다.
맥을 새로 사면 개발 환경 세팅에 이틀이 걸렸다. dotfiles과 자동화 스크립트를 만들고 나니 30분이면 끝난다.
정규표현식을 외계어처럼 느꼈는데, 실제로 자주 쓰는 패턴 20개만 익히니 텍스트 처리가 한 줄로 끝났다.
폼 검증 로직을 직접 작성하다가 엣지 케이스 지옥에 빠졌다. React Hook Form과 Zod 조합이 폼 개발의 최적해였다.
Redux가 너무 복잡해서 Zustand로 바꿨는데, 보일러플레이트가 90% 줄었다. 근데 제대로 쓰려면 알아야 할 패턴이 있었다.
SSR 페이지가 데이터 로딩 때문에 3초간 빈 화면을 보여주고 있었다. Streaming SSR로 준비된 부분부터 먼저 보여주니 체감 속도가 극적으로 개선됐다.
API 라우트 만들고, fetch 호출하고, 로딩 상태 관리하고... 폼 하나 처리하는 데 너무 많은 코드가 필요했는데, Server Actions로 획기적으로 줄었다.
Server Component에서 함수를 props로 전달했더니 에러가 났다. 직렬화 경계를 이해하고 나니 RSC의 진짜 패턴이 보였다.
블로그 이미지가 전체 페이지 용량의 80%를 차지하고 있었다. 포맷 변환과 반응형 이미지로 로딩 속도를 극적으로 개선한 이야기.
