Next.js Version 11 업데이트 사항 정리

21년 6월 16일에 Vercel에서 Next.js의 버전11 업데이트된 사항에 대해 공개했다.
perfomance 최적화 이런건 물론이고(?), Conformance랑, Image 최적화 관련, Webpack5 관련 요소들이 새롭게 업데이트 됐다..🙌

Next.js가 갈수록 SEO 전용 프레임워크로 거듭나는 것 같다. 웹 바이탈(Web vital) 개선 요소들을 계속해서 공략해 나아가는 느낌이다.

 

업데이트 사항

Conformance: 최적의 UX를 제공할 수 있는 최적화된 솔루션을 제공하는 시스템

Improved Performance: Cold Start up Time(Next.js 빌드 및 실행할 때 걸리는 시간?) 최적화.

`next/script`: 성능 향상을 위한 third-party 우선순위 로딩 자동화.

`next/image`: 이미지 사이즈를 미리 탐지하고 blur-up placeholder 처리를 통해서, layout shift를 줄이고 스무스하게 이미지를 보여주는 사용자 경험 추가.

Webpack 5: 이제 Next.js application 자체에서, 모든 Next.js 개발자들에게 webpack5 관련 요소들을 기본적으로 제공.

Create React App Migration (Experimental): Create React App에서 Next.js가 지원되도록 변환 자동화

Next.js Live (Preview Release): 브라우저를 통해 실시간 협업 코딩 가능

 

 

각 업데이트 내용 상세 설명

[Conformance]

Conformance는 최적화된 로딩 및 Core Web Vitials를 지원하기 위해 신중하게 제작된 솔루션 및 규칙을 제공하는 시스템이다.
(라고 원본 Next.js 블로그에 적혀 있어서, Conformance에 대해 보고 있는데, Conformance라는게 뭔가 Web vital 지표가 아니라 Core Web Vital을 위한 프레임워크 적합성 판단을 하는 요소? 방법론? 같다.. 좀더 꼼꼼히 읽어봐야겠다.)

또한. Next.js 11에서 ESLint를 자체로 지원해서 프레임워크 별 문제를 쉽게 발견할 수 있다. ESLint를 실행하려면, `npx next lint` 를 실행하면 된다.

$ npx next lint
We created the .eslintrc file for you and included the base Next.js ESLint configuration.

./pages/about.js
7:9  Warning: Do not include stylesheets manually. See: https://nextjs.org/docs/messages/no-css-tags.  @next/next/no-css-tags
10:7  Warning: External synchronous scripts are forbidden. See: https://nextjs.org/docs/messages/no-sync-scripts.  @next/next/no-sync-scripts

./pages/index.js
4:10  Warning: Do not use the HTML <a> tag to navigate to /about/. Use Link from 'next/link' instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages.  @next/next/no-html-link-for-pages

Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules

✨  Done in 1.94s.

 

[Improved Performance]

Next.js 10 이후에 Next.js 퍼포먼스 향상을 위해 계속해서 끌어올렸고, 이번에는 Babel에 대한 또 다른 최적화를 포함시켰다. Webpack용 Babel loader를 새롭게 구현해서 로딩을 최적화하고 메모리 내 캐싱 구성 레이어가 추가되었다. 실제로 개발자들에겐 변화가 없지만, 성능면으로는 더 빠른 개발 경험을 가져다 준다.
(그냥 쉽게 말해 전체적으로 빌드 로딩 속도 향상 시켰다.)

 

[`next/script`]

일반적으로 third-party 들은 로딩 성능이 무겁고 사용자 경험을 저하시키는 요인 중 하나이며, 개발자들이 이에 대한 최적화된 로딩을 위해서 각 로딩 처리 방식 설정이나 로딩하는 스크립트 위치를 결정해야 했는데, 이에 대해 종종 어려움이 있다.

이제는 next.js/script를 통해서 개발자가 Third-party 라이브러리를 로드할 때 우선 순위를 직접 설정해서 로딩 퍼포먼스 최적화를 시킬 수 있다. 

next/script에서는 strategy 속성을 정의할 수 있고, Next.js 로딩 속도를 개선하기 위해 자동으로 우선 순위를 지정한다.

 

• `beforeInteractive` : 페이지가 유저와의 Interaction 모드가 되기 전에 가져와서 실행해야하는 중요한 스크립트 용도. 이러한 스크립트는 서버에서 초기 HTML에 삽입되고 자체 Bundle Javascript가 실행되기 전에 실행 됨.
  
  
• `afterInteractive`(Default) : 페이지가 유저와의 Interaction 모드가 된 후에 가져와서 실행하는 스크립트 용도. 
  
  
• `lazyOnload` : 채팅 지원 및 소셜 미디어 위젯과 같이 유휴 시간 동안 로드 될 때까지 대기할 수 있는 스크립트의 용도.

 

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

 

또한 아래처럼 로드 후에 코드를 실행할 수도 있다. 예를 들어 사용자가 동의에 응답할 때까지 코드 실행을 기다릴 수 있다.

<Script
  src={url} // consent mangagement
  strategy="beforeInteractive"
  onLoad={() => {
    // If loaded successfully, then you can load other scripts in sequence
  }}
/>

 

 

[`next/image`]

Next.js에서 지원하는 next/image 관련 업데이트 사항들이다.

Automatically Size Detection

import한 이미지를 src 속성으로 추가하게 되면, 해당 이미지 태그의 width, height의 속성을 자동으로 적용.

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

export default function Home() {
  return (
    // When importing the image as the source, you
    // don't need to define `width` and `height`.
    <Image src={author} alt="Picture of the author" />
  )
}

 

Image Placeholders

Image lazy Loading 기법 중 하나인, Blur 처리 기법을 Next.js Image 태그 내에서 자체 제공한다. 저화질의 이미지를 빠르게 제공함으로써 시스템 자체의 pre loading 속도를 개선한다.

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

 

 

[Webpack 5]

이번 Next.js 11에서는 모든 Next.js 애플리케이션의 Default로 웹팩5가 이용되면서 다양한 기능과 개선 사항을 제공한다.

 

Webpack5의 다양한 기능과 개선 사항 (간략하게)

- 빠른 디스크 캐싱: `next build` 실행 간에 작업을 지속할 수 있음. 변경된 파일만 다시 컴파일되서 성능 향상. 후속 빌드에서 63% 속도 향상.

- 빠른 새로 고침: 빠른 새로 고침 관련 컴파일 우선 순위를 지정해서 매번 100ms~200ms 내에서 더 빠른 새로 고침을 수행.

- 장기 캐싱 개선: production용 빌드 시, `next build`에서 JavaScript 브라우저 캐싱이 향상. 페이지 내용이 변경되지 않으면 해시는 동일하게 유지.

- 향상된 트리 쉐이킹: CommonJS 모듈을 Tree Shaking 자동화 해서, 사용하지 않는 코드를 자동으로 제거 가능.

프로젝트 내에 개발자가 직접 정의한 Webpack config가 있을 경우, Webpack 5에 대한 업그레이드 문서를 확인하는 것이 좋다.

 

[Create React App Migration (Experimental)]

많은 개발자들이 Create React App에서 Next.js로 마이그레이션하는 프로젝트가 증가하는 추세이다.

그래서 해당 프로젝트가 Next.js 변환할 수 있도록 @next/codemod를 이용해서 자동으로 Next.js로 변환하는 새로운 도구를 도입했다.

자동으로 pages/ 디렉토리를 추가하고, CSS 파일들을 올바른 위치로 이동시킨다. 또한 Create React App에서 사용되는 일부 패턴이 Next.js에서 작동하도록 하는 Create React App 호환성 모드를 활성화 한다.

$ npx @next/codemod cra-to-next

 

참고로 이 기능을 아직 실험 단계이다.

 

[Next.js Live (Preview Release)]

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

이렇게 하면 빌드 단계없이 URL을 사용하여 즉시 공동 작업하고 공유 할 수 있다. 이는 개발자에게 더 빠른 피드백을 주고, 빌드 대기 시간 단축, 브라우저 내에서 실시간 페어 프로그래밍을 가능하게 된다.

 

업데이트 방법

$ npm i next@latest react@latest react-dom@latest

// or

$ yarn upgrade next react react-dom --latest

 

 

Reference

Next.js 11