베르셀(Vercel)이 10월 27일(현지 시각) 리액트 기반 웹 프레임워크 ‘Next.js’의 버전 10을 공개했다. Next.js 버전 10에는 사용자 애널리틱스, 자동 이미지 최적화, 전자상거래용 올인원 스타터 키트, 다국어 라우팅 등을 포함한 여러 기능이 추가됐다.
올해로 4주년을 맞은 ‘Next.js’는 하이브리드 정적 및 서버 렌더링(hybrid static and server rendering), 스마트 번들링(smart bundling), 타입스크립트(TypeScript) 지원, 라우트 프리페칭(route pre-fetching) 등의 기능을 제공한다. 이번에 발표된 버전 10의 새로운 기능은 다음과 같다.
• 자동 이미지 최적화(Automatic image optimization): 기존 HTML 및 브라우저 이미지를 대체한다. 개발자는 프로그레시브 로딩(progressive loading)을 통해 페이지 응답 속도를 향상시키는 리액트 기반 이미지 구성요소로 기존 HTML 태그를 자동 교체할 수 있다.
• 다국어 라우팅(Internationalized routing) 및 자동 언어 감지(automatic language detection): 사용자 선호 언어에 따라 제공할 콘텐츠를 결정하는 동시에 즉각적인 언어 네고시에이션 및 메모라이제이션을 지원해 개발팀에 번역 경로를 제공하고 DIY 접근방식을 제거한다.
• Next.js 애널리틱스(Next.js Analytics): 개발자가 웹 사이트 성능을 개선하는 데 필요한 사용자 인사이트를 지속적으로 제공한다. 지속적인 피드백은 사이트나 애플리케이션이 어떻게 작동하는지 이해하고 웹 바이탈(Web Vitals) 점수를 올리는 데 도움을 준다.
• Next.js 커머스(Next.js Commerce): 이는 성능, 개인화, 몰입적인 사용자 경험을 지원하는 전자상거래 사이트용 올인원 스타터 키트다. 이 오픈소스 플랫폼은 빅커머스(BigCommerce)에서 제공하는 데이터 레이어 및 재사용할 수 있는 데이터 프리미티브를 통해 일반적인 전자상거래 사이트 구성요소 구축을 자동화한다.
• 이제 서드파티 리액트 구성요소에서 CSS를 가져올 수 있다.
이 밖에 Next.js 버전 10은 최근 공개된 ‘리액트 17(React 17)’을 지원한다. 리액트 17에는 Next.js에 관한 주요 변경사항은 없었지만 피어 종속성 업데이트와 같은 일부 유지관리 변경이 필요했다. 새로운 JSX 변환은 리액트 17을 사용할 때 자동 활성화된다. ciokr@idg.co.kr