Next.js 10.2: 더 빨라진 빌드, 웹폰트 최적화!

Next.js 10.2 릴리즈, 빌드 속도 최대 60% 향상, 갱신 속도 개선

Webpack 5 지원으로 디스크 캐싱 및 트리 쉐이킹 성능 개선

웹폰트 자동 최적화 기능 추가로 FCP 및 LCP 지표 향상

Webpack 5를 통한 빌드 성능 개선

Next.js 10.2는 Webpack 5를 기본 지원하여 빌드 속도를 향상시켰다. 구체적으로 디스크 캐싱을 통해 변경된 파일만 재컴파일하며, 트리 쉐이킹으로 사용하지 않는 코드를 제거한다. 따라서 빌드 시간 단축과 배포 효율성 증대를 기대할 수 있다.

웹폰트 자동 최적화의 원리

Next.js는 웹폰트 자동 최적화 기능을 통해 FCP 및 LCP를 개선한다. 구체적으로 빌드 시점에 폰트 CSS를 인라인하여 불필요한 요청을 줄인다. 반면, 아직 Google Fonts만 지원하며, 다른 폰트 제공업체 지원 및 로딩 전략 제어가 과제로 남아있다.

헤더 및 쿼리 기반 라우팅 활용법

Next.js의 리다이렉트 및 리라이트는 헤더, 쿠키, 쿼리 스트링을 기반으로 라우팅을 지원한다. 구체적으로 `has` 속성을 사용하여 User-Agent 또는 IP 주소 기반의 조건부 라우팅을 구현할 수 있다. 따라서 A/B 테스트 및 사용자 맞춤형 콘텐츠 제공에 활용 가능하다.