2021.06.23

스타트업 타임 개선·실시간 피드백··· Next.js 11 기능은?

Paul Krill | InfoWorld
넥스트 제이에스 (Next.js) 개발사 버셀이 최근 Next.js 11을 출시했다. 빨라진 스타트업 타임과 실시간 피드백 등을 특징으로 한다. 

Next.js 11은 버셀의 웹 애플리케이션 프레임워크 최신 버전이며, 리액트 자바스크립트 라이브러리를 기반으로 한다. 버셀은 Next.js 11를 출시하면서 협업 지원에 특화된 브라우저 기반 개발 서버인 Next.js Live를 프리뷰 버전으로 발표했다. 
 
ⓒGetty Images Bank

버셀에 따르면 Next.js의 스타트업 타임은 최대 24%까지 향상된 상태며, 코드 편집 후 변경사항을 화면에 반영하는 데 드는 처리시간은 40% 단축됐다. 한편, 개발자는 Next.js 스크립트 컴포넌트를 통해 타사 스크립트의 로딩 우선순위를 지정함으로써 성능을 향상시킬 수 있다. 

현재 프리뷰 릴리즈로 제공되는 Next.js Live는 Next.js용 새 개발 서버 엔진과 버셀의 협업 플랫폼이 결합돼 있다. 덕분에 개발 팀이 작업 내역 공유와 편집을 어디서나 할 수 있다는 설명이다. 또한 Next.js Live는 클라우드 기반 협업을 지원한다. 정적 및 동적 Next.js 애플리케이션이 지원되며 서비스워커(ServiceWorker), 웹 어셈블리(WebAssembly) 및 ES 모듈이 활용되므로 개발자들 간 원격 협업이 가능하다. 또한 Next.js Live는 오프라인에서도 작동하므로 원격 가상 머신이 없어도 된다.

Next.js 11은 지난 15일에 공개됐다. 업데이트 지침과 마이그레이션 가이드는 nextjs.org에 있다. 그 외에 Next.js 11의 기능들은 다음과 같다. 
 
  • 웹팩 핫 모듈 교체(HMR)를 이용하므로 구성 작업 없이도 실시간 피드백을 지원한다. 파일이 저장되는 즉시 브라우저에 변경 사항이 반영된다. 패스트 리프레시를 지원하므로 변경 이후의 상태가 유지된다. 웹팩 5 모듈 번들러를 모든 Next.js 응용 프로그램에서 기본적으로 사용할 수 있다. 
     
  • 시범 도입된 크리에이트 리액트 앱(CRA) 마이그레이션 기능을 통해 CRA를 Next.js와 호환되는 버전으로 전환할 수 있다. 
     
  • 향상된 이미지 기능을 통해 HTML 이미지 태그를 Next.js 이미지 컴포넌트로 교체할 수 있으며, 이미지를 각 기기의 뷰포트에 맞게 최적화할 수 있다. 
     
  • 개발자가 로딩 성능 향상을 위해 복잡한 규칙을 기억할 필요가 없다. 
     
  • 빌드 시 커스텀 폰트의 CSS가 자동으로 인라인 처리되므로, 라운드 트립 페치 폰트 선언이 필요 없다. Next.js의 사전 연결 태그를 통해 기본 폰트 파일과 연결할 수 있다.

한편, Next.js 11은 지난 10월 출시된 Next.js 10의 후속작이다. ciokr@idg.co.kr
 



2021.06.23

스타트업 타임 개선·실시간 피드백··· Next.js 11 기능은?

Paul Krill | InfoWorld
넥스트 제이에스 (Next.js) 개발사 버셀이 최근 Next.js 11을 출시했다. 빨라진 스타트업 타임과 실시간 피드백 등을 특징으로 한다. 

Next.js 11은 버셀의 웹 애플리케이션 프레임워크 최신 버전이며, 리액트 자바스크립트 라이브러리를 기반으로 한다. 버셀은 Next.js 11를 출시하면서 협업 지원에 특화된 브라우저 기반 개발 서버인 Next.js Live를 프리뷰 버전으로 발표했다. 
 
ⓒGetty Images Bank

버셀에 따르면 Next.js의 스타트업 타임은 최대 24%까지 향상된 상태며, 코드 편집 후 변경사항을 화면에 반영하는 데 드는 처리시간은 40% 단축됐다. 한편, 개발자는 Next.js 스크립트 컴포넌트를 통해 타사 스크립트의 로딩 우선순위를 지정함으로써 성능을 향상시킬 수 있다. 

현재 프리뷰 릴리즈로 제공되는 Next.js Live는 Next.js용 새 개발 서버 엔진과 버셀의 협업 플랫폼이 결합돼 있다. 덕분에 개발 팀이 작업 내역 공유와 편집을 어디서나 할 수 있다는 설명이다. 또한 Next.js Live는 클라우드 기반 협업을 지원한다. 정적 및 동적 Next.js 애플리케이션이 지원되며 서비스워커(ServiceWorker), 웹 어셈블리(WebAssembly) 및 ES 모듈이 활용되므로 개발자들 간 원격 협업이 가능하다. 또한 Next.js Live는 오프라인에서도 작동하므로 원격 가상 머신이 없어도 된다.

Next.js 11은 지난 15일에 공개됐다. 업데이트 지침과 마이그레이션 가이드는 nextjs.org에 있다. 그 외에 Next.js 11의 기능들은 다음과 같다. 
 
  • 웹팩 핫 모듈 교체(HMR)를 이용하므로 구성 작업 없이도 실시간 피드백을 지원한다. 파일이 저장되는 즉시 브라우저에 변경 사항이 반영된다. 패스트 리프레시를 지원하므로 변경 이후의 상태가 유지된다. 웹팩 5 모듈 번들러를 모든 Next.js 응용 프로그램에서 기본적으로 사용할 수 있다. 
     
  • 시범 도입된 크리에이트 리액트 앱(CRA) 마이그레이션 기능을 통해 CRA를 Next.js와 호환되는 버전으로 전환할 수 있다. 
     
  • 향상된 이미지 기능을 통해 HTML 이미지 태그를 Next.js 이미지 컴포넌트로 교체할 수 있으며, 이미지를 각 기기의 뷰포트에 맞게 최적화할 수 있다. 
     
  • 개발자가 로딩 성능 향상을 위해 복잡한 규칙을 기억할 필요가 없다. 
     
  • 빌드 시 커스텀 폰트의 CSS가 자동으로 인라인 처리되므로, 라운드 트립 페치 폰트 선언이 필요 없다. Next.js의 사전 연결 태그를 통해 기본 폰트 파일과 연결할 수 있다.

한편, Next.js 11은 지난 10월 출시된 Next.js 10의 후속작이다. ciokr@idg.co.kr
 

X