2019년에 Next.js 8 + Express로 구축한 VR Store 데모 앱을 Next.js 12로 업그레이드하면서 Core Web Vitals 성능 점수가 32에서 99로 향상된 전체 과정을 공개했다. 핵심은 Express 커스텀 서버를 제거하고 Next.js 빌트인 기능(`getStaticProps`, API Routes, `next/image`, `next/dynamic`, SWC)으로 전환한 것이다. 이미지 크기만으로도 1.3MB → 16.6kB(-98.75%)를 달성했고, SWC 컴파일러 도입으로 빌드 시간은 90초에서 30초로 단축됐다.
핵심 포인트- 성능 점수 **32 → 99** (Core Web Vitals 기반 Lighthouse)
- `<img>` → `<Image />` (next/image): 이미지 크기 **1.3MB → 16.6kB (-98.75%)**, 로딩 **~3,000ms → ~270ms**
- `getInitialProps` → `getStaticProps`: 빌드 타임 데이터 fetch, 클라이언트 번들 미포함, `<Link />` 조합으로 뷰포트 진입 시 자동 프리페치
- Express 커스텀 서버 완전 제거 → Next.js API Routes로 대체 (별도 백엔드 폴더 불필요)
- `next/dynamic`: CartSidebar + Stripe 라이브러리를 초기 번들에서 제외, 실제 사용 시점까지 defer
- SWC Rust 컴파일러(Next.js 12): 빌드 **~90s → ~30s**, Fast Refresh **3배** 빠른 갱신
상세 정리- **`getInitialProps` 문제점**: 클라이언트·서버 양쪽 실행 → 클라이언트 번들에 서버 코드 포함 가능. 페이지 이동 시마다 데이터 fetch 발생, 페이지 렌더링 블로킹
- **`getStaticProps` 장점**: 항상 서버에서만 실행(클라이언트 번들 미포함). 빌드 타임 데이터 fetch로 즉시 접근. `<Link />` 조합 시 뷰포트 진입 페이지 자동 프리페치
- **`getStaticPaths` + 동적 라우트**: `pages/model/[id].js` 패턴으로 각 모델 페이지를 빌드 타임에 정적 생성. query parameter 기반 `getInitialProps` 방식 완전 대체
- **next/image 내부 동작**: WebP 포맷 제공(JPEG 대비 25-35% 작음), viewport와 이미지 bounding box 교차 감지 후에만 로드(lazy loading), 디바이스별 최적 크기 제공, CLS 방지
- **API Routes 전환**: `pages/api/checkout.ts` 등으로 Express 서버 완전 대체. 결제 처리(`/api/checkout`)는 API Route 유지, 정적 데이터 API는 `getStaticProps`로 이동
- **NextAuth.js로 인증 간소화**: Passport.js 대체. 50개 이상 OAuth provider 지원, GitHub 로그인을 5줄 코드로 구현 (`providers: [GithubProvider({clientId, clientSecret})]`)
- **`next/dynamic` 코드 스플리팅**: `dynamic(() => import('../components/CartSidebar'))` 로 별도 JS 청크 생성. 사용자가 장바구니 열기 전까지 Stripe 라이브러리 포함 번들 fetch 안 함
- **SWC Rust 컴파일러**: Babel 대비 네이티브 컴파일로 대폭 빠름. Next.js 12부터 기본 적용, 빌드 시간 90→30초, Fast Refresh 3배 빠른 갱신
- **폰트 인라인화**: 빌드 시 Google Fonts CSS를 `<style>` 태그로 인라인 처리, 외부 폰트 선언 fetch 요청 4개→2개 감소
왜 읽나Next.js 8→12 업그레이드 과정에서 각 기능 도입 전후의 실측 수치(이미지 -98.75%, 빌드 -67%, 성능 점수 32→99)를 코드와 함께 확인할 수 있어, Next.js 마이그레이션의 실질적 효과를 가장 직관적으로 보여주는 사례다.
Vercel Blog·
LINE Engineering·