대형 오픈소스 React 앱을 Next.js로 마이그레이션한 BBC 사례

BBC의 대규모 프로덕션 React SPA(TypeScript + Emotion + Webpack + React Router 등 의존성 30개 이상)를 Next.js로 마이그레이션하며 코드 20,000줄 이상과 의존성 30개 이상을 제거했다. HMR 속도는 1.3초에서 131ms로 10배 빨라졌고, 네트워크 요청도 빈 캐시 기준 57건에서 34건으로 줄었다.

핵심 포인트

코드 20,000줄+, 의존성 30개+ 제거. 커스텀 라우팅/서버/Babel 설정을 Next.js 내장 기능으로 교체
HMR: 1.3초 → 131ms (10배 개선). 네트워크 요청: 57 → 34 (빈 캐시 기준)
Emotion CSS-in-JS, React 컴포넌트, 내부 컴포넌트 라이브러리는 그대로 보존 — 재사용성 우선 전략
초기 배포를 빠르게 프리뷰로 올려 빌드 파이프라인 검증 후 점진적 라우트 추가
Moment.js 타임존 데이터 팽창 문제는 커스텀 Webpack 플러그인을 next.config.js로 포팅해 해결

상세 정리

전략 3원칙: 기존 Emotion/컴포넌트 재사용 (잘 동작하는 건 그대로), Next.js가 내장 처리하는 것은 삭제 (Babel 설정/라우팅/서버 구현), 표준 프레임워크로 온보딩 속도 개선 + React Suspense 같은 신기능 채택 가능.
초기 셋업: Next.js 설치 + Emotion 지원 설정 후 단순 프리뷰를 먼저 배포. 파이프라인 동작 확인 후 라우트를 점진적으로 추가.
/news 라우트 구현에서 배운 것: import alias는 next.config.js의 Webpack 설정으로 해결, 기존 PageWrapper + context provider를 _app.js에서 초기화, 기존 getInitialData 필터 함수를 그대로 적용해 데이터 일관성 유지.
타임존 팽창 문제: 프로덕션 빌드에서 Moment.js 타임존 데이터가 번들을 비대하게 만드는 문제 발견. 기존 커스텀 Webpack 플러그인을 next.config.js로 포팅해 해결.
기사 라우트 추가: 첫 라우트에서 패턴을 잡아둔 덕분에 두 번째 라우트는 빠르게 처리 가능 — 초기 기반 작업의 복리 효과.
제거된 것들: Babel 전체 설정, React Helmet(next/head로 교체), React Router, Express 서버, 커스텀 fetch 폴리필, 비핵심 Webpack 설정.
가짜 API 레이어: Next.js /pages/api가 아닌 파일 기반 응답으로 정적 생성 요구사항 충족. 동적 에러 페이지는 초기 데이터에 상태 코드를 포함시켜 처리.
핵심 교훈: "컴포넌트에 데이터를 전달하고 상태를 연결하는 작업을 마이그레이션 초기에 집중해야 한다." 원본 앱의 데이터 흐름과 컴포넌트 계층 이해가 선행 조건.
미활용 최적화: next/link(SPA 전환), next/image(react-lazyload 대체), Next.js 내장 ESLint, ISR 전략, 다국어 라우팅 등 후속 작업 대상.

왜 읽나대규모 커스텀 React 앱을 Next.js로 옮기는 프론트엔드 엔지니어에게 단계별 마이그레이션 전략, 실제 마주친 문제와 해결법, 코드 감소와 성능 개선 수치를 구체적으로 참고할 수 있는 케이스 스터디.

Vercel Blog 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

대형 오픈소스 React 앱을 Next.js로 마이그레이션한 BBC 사례

이 글과 비슷한

Chat SDK의 Discord Components V2 지원 추가

Flags SDK, 플래그 평가 속도 10배 개선

AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기