2020.10.28

Next.js 버전 10 공개··· ”이미지 최적화, 사용자 애널리틱스 추가”

Paul Krill | InfoWorld
베르셀(Vercel)이 10월 27일(현지 시각) 리액트 기반 웹 프레임워크 ‘Next.js’의 버전 10을 공개했다. Next.js 버전 10에는 사용자 애널리틱스, 자동 이미지 최적화, 전자상거래용 올인원 스타터 키트, 다국어 라우팅 등을 포함한 여러 기능이 추가됐다. 
 
ⓒGetty Images

올해로 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
 



2020.10.28

Next.js 버전 10 공개··· ”이미지 최적화, 사용자 애널리틱스 추가”

Paul Krill | InfoWorld
베르셀(Vercel)이 10월 27일(현지 시각) 리액트 기반 웹 프레임워크 ‘Next.js’의 버전 10을 공개했다. Next.js 버전 10에는 사용자 애널리틱스, 자동 이미지 최적화, 전자상거래용 올인원 스타터 키트, 다국어 라우팅 등을 포함한 여러 기능이 추가됐다. 
 
ⓒGetty Images

올해로 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
 

X