Next.js 11 공개 — Script/Image 컴포넌트 개선과 Next.js Live 발표

Next.js 11이 Conf Special Edition에서 공개됐다. Script 컴포넌트, Image 컴포넌트 개선, 폰트 최적화, Google의 Conformance 시스템 연동이 핵심이며, 브라우저 기반 협업 개발 도구 Next.js Live도 발표됐다.

핵심 포인트

상세 정리

Script 컴포넌트 도입: 타사 스크립트 추가 시 로딩 전략(strategy)을 명시해 페이지 성능에 미치는 영향을 최소화한다. 기존 `<script>` 태그를 `<Script>` 컴포넌트로 교체하면 개발자가 로딩 시점을 직접 제어할 수 있다.
Image 컴포넌트 업데이트: 자동 크기 감지로 개발자가 width/height를 명시하지 않아도 레이아웃 이동이 발생하지 않는다. blur-up 플레이스홀더로 이미지 로딩 중 부드러운 전환을 제공하며 CLS를 줄인다.
폰트 최적화: Google Chrome 팀과의 협력으로 성능 연구 기반 최적화가 이루어졌다.
Conformance 시스템: 프레임워크에 성능 가드레일과 기본값을 내장해 개발자가 성능에 영향 미치는 결정을 자신감 있게 내릴 수 있도록 한다. Google Aurora 팀이 강조한 "어려운 작업은 프레임워크가 담당" 철학을 구현했다.
Next.js Live: 브라우저 기반 협업 개발 환경으로, 배포 없이 코드 변경사항이 즉시 반영된다. 팀원과 실시간 채팅, 코드 공유, 그림 기능을 지원한다.

왜 읽나Next.js 11의 성능 최적화 기능과 CLS 개선 접근법을 파악하고 싶은 프런트엔드 엔지니어에게 유용하다.

Vercel Blog 블로그

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

읽음 (0)

이 글과 비슷한