Nest js 11 릴리즈 내용 보기

2021년 6월 16일 수요일에 업데이트된 Next js 11,
공식 홈페이지에서 번역기를 돌려가면서 어떠한 것들이 달라졌는지 살펴보려 한다.

요약

• Conformance: 최적의 UX를 지원하기 위해 세심하게 제작된 솔루션을 제공하는 시스템
• Improved Performance: 코딩을 더 빨리 시작할 수 있도록 콜드 스타트업 시간을 개선하기 위한 추가 최적화
• next/script: 성능을 향상시키기 위해 자동으로 타사 스크립트 로드의 우선순위를 지정
• next/image: 자동 크기 감지 및 블러업 자리 표시자 지원으로 레이아웃 이동을 줄이고 보다 부드러운 시각적 경험 제공
• Webpack 5: 이제 모든 Next.js 애플리케이션에 대해 기본적으로 활성화되어 모든 Next.js 개발자에게 이러한 이점을 제공
• Create React App Migration (Experimental): Create React App을 Next.js와 호환되도록 자동 변환
• Next.js Live (Preview Release): 브라우저에서 팀과 함께 실시간으로 코드를 작성 가능

 

Next.js 11 에서는 최소 React 버전이 17.0.2로 업데이트되었습니다.

Next.js 11 이전 사용자들은 이 버전을 사용하려면, 다음 명령어를 실행하여 업데이트한다.

Next.js 11 업그레이드 가이드

// npm
npm install react@latest react-dom@latest next@latest
// yarn
yarn add react@latest react-dom@latest next@latest

node 15.0.0 이상 사용하라고 error가 난다.

Conformance

아직 이해하지 못해, 공부하고 올리겠습니다.

참고 https://nextjs.org/blog/next-11#conformance

Improved Performance

Next.js 버전 10.1 및 10.2에서는 React Fast Refresh를 통해 시작 시간을 최대 24% 개선하고 변경 처리 시간을 40% 더 단축했습니다.

Next.js 11에는 시작 시간을 더욱 줄이기 위해 Babel에 대한 또 다른 최적화가 포함되어 있습니다. 웹팩용 Babel 로더의 새로운 구현을 생성하여 로딩을 최적화하고 메모리 내 구성 캐싱 레이어를 추가했습니다. 궁극적으로 더 빠른 개발 경험을 제공합니다.

Script Optimization

next/script를 사용하여 전략 속성을 정의할 수 있으며 Next.js는 자동으로 우선순위를 지정하여 로딩 성능을 향상합니다.

• beforeInteractive: 페이지가 활성화되기 전에 (번들된 자바스크립트가 실행되기 전에) 스크립트를 가져오고 실행한다. 스크립트가 SSR 된 html내부에 주입된다
• afterInteractive(기본값): 페이지가 활성화된 이후 (번들된 자바스크립트가 모두 실행되고) 스크립트를 가져오고 실행한다. 스크립트를 hydration과정에서 주입하고, 이후 즉시 실행된다.
• lazyOnload: onload 시점에 스크립트를 실행한다. requestIdleCallback을 활용하여 idle 상태가 되면 바로 실행한다.

  <Script
    src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.map"
    strategy="beforeInteractive" // lazyOnload, afterInteractive
  />

Image Improvements

Cumulative Layout Shift란 이미지 로딩으로 인해 사이트의 레이아웃이 갑자기 밀리거나 변하는 현상을 의미한다. next/image가 이 현상을 개선했다고 합니다.

1. Automatic Size Detection (Local Images)

기존에는 next/image의 이미지를 사용하려면 width값과 height 값을 지정해줘야 했었는데, 이러한 불편을 없애줬다고 할 수 있습니다. 정적 이미지의 너비와 높이를 자동으로 정의합니다.

import Image from 'next/image'
import author from '../public/me.png'

export default function Home() {
  return (
    <Image src={author} alt="Picture of the author" />
  )
}

2. Image Placeholders

next/image는 placeholder를 지원하여, 특히 인터넷 연결이 느린 사용자의 경우 빈 공간에서 이미지로의 전환을 용이하게 하고 인지되는 로딩 시간을 줄입니다.

이것을 사용하려면 이미지에 placeholder="blur"를 추가하세요.

<Image src={author} alt="Picture of the author" placeholder="blur" />

Webpack 5

webpack 5를 기본값으로 만듭니다.

CRA Migration

지난 6개월 동안 Create React App에서 Next.js로 마이그레이션하는 애플리케이션이 증가했습니다.

Create React App 애플리케이션을 Next.js와 호환되도록 자동으로 변환하는 새로운 도구를 @next/codemod에 도입했습니다.

이것을 사용하면, 자동으로 페이지/ 디렉토리를 추가하고 CSS 가져오기를 올바른 위치로 이동합니다.

또한 Next.js에서 Create React App 호환성 모드를 활성화하여 Create React App에 사용된 일부 패턴이 Next.js와 작동하도록 합니다. Create React App 프로젝트 마이그레이션을 시작하려면 다음 명령을 사용하세요.

npx @next/codemod cra-to-next

Next.js Live (Preview Release)

ServiceWorker, WebAssembly 및 ES 모듈과 같은 최첨단 기술을 활용하여 Next.js Live는 전체 개발 프로세스를 웹 브라우저에 넣습니다.

빌드 단계 없이 URL을 사용하여 즉시 공동 작업 및 공유와 같은 가능성이 열립니다.

이는 더 빠른 피드백 루프, 빌드 대기 시간 단축, 브라우저 내에서 실시간 피어 프로그래밍 및 편집을 할 수 있음을 의미합니다.

 

 

출처:

https://yceffort.kr/2021/06/nextjs-11

https://nextjs.org/blog/next-11

https://velog.io/@howcooliscoding/Next.js-11-%EC%97%90-%ED%8F%AC%ED%95%A8%EB%90%9C-%EB%82%B4%EC%9A%A9