Next.js 11

Wednesday, June 16th 2021

Next.js는 최고의 개발자 경험을 만들기 위해 다음의 특징을 고려 및 유지한다.

Conformance : 최적의 UX를 지원하기위해 신중하게 제작된 솔류션을 제공하는 시스템
ImprovedPerformance : 빠른 코딩을 시작 할 수 있도록 cold start 시간을 개선하기 위한 최적화
next/script : third-party script 로드 우선순의를 자동으로 지정
next/image : 자동 크기 감지 및 blur-up placehoder 지원으로 레이아웃 이동을 줄이고 보다 부드러운 시각적 경험 제공
Webpack 5 : 이제 모든 Next.js에 기본적으로 활성화 되어 개발자에게 관련 이점을 제공
Create React App Migration (Experimental) : Create React App을 Next.js와 호환되도록 자동 변환
Next.js Live (Preview Release) : 브라우저에서 팀과 함께 실시간으로 코드작성

Conformance

프레임워크에서 훌륭한 tool 그리고 자동 최적화를 사용하더라도 보안 및 접근성과 같은 개선을 요청 받을 수 있다.

오늘날 Google의 웹 플랫폼팀은 Conformance을 위해 Next.js를 사용하여 시스템을 오픈소싱하기 시작했다.

Conformance는 보안 및 접근성과 같은 측면을 지원하기 위해 최적의 로딩 및 핵심 Web vital을 지원하기 위해 신중하게 제작된 솔루션 및 규칙을 제공하는 시스템이다. 이러한 솔루션을 사용하면 팀에서 최적의 로딩 성능을 위한 모든 최신 규칙을 암기하지 않아도되며 동시에 응용프로그램에 적합한 선택을 할 수 있는 유연성을 제공한다.

성능 연구를 기반으로 하는 많은 최적화와 Next.js 11은 이제 ESLint를 즉시 지원하여 개발 중에 프레임워크 관련 문제를 쉽게 포착하고 팀이 확장하는 경우에도 유용하다.

ESLint를 시작하려면 Next.js 11로 업그레이드한 후 npx next lint를 실행한다. ESLint 통합은 신규 및 기존 Next.js에서 작동하여 개발자가 더 나은 애플리케이션을 빌드하는데 도움이 되는 새로운 규칙 세트를 제공한다.

$ 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의 개발자 경험을 개선하는데 집중했다. 10.1 및 10.2에서는 React Fast Refresh를 통해 시작 시간을 최대 24% 개선하고 변경 처리 시간을 40% 더 단축했다.

Next.js 11 에서는 시작 시간을 더욱 줄이기 위해 Babel에 대한 또 다른 최적화가 포함되었다. 로딩을 최적화 하고 메모리 내 캐싱 레이어(in-memory config caching layer)를 추가하는 웹팩용 Babel 로더의 새로운 구현을 만들었다. 실제로는 개발자에게 아무런 변화가 없음을 의미하지만 궁극적으로 더 빠른 개발 경험을 제공한다.

Script Optimization

새로운 Next.js 스크립트 구성요소는 개발자가 third-party script 로드 우선 순위를 설정하여 개발자 시간을 절약하고 로드 성능을 향상할 수 있도록 최적화한다.

웹사이트는 analytics, ads, widgets 등을 필요로 한다. 그러나 이러한 스크립트는 로드 성능에 부담을 주는 경항이 있으며 사용자 경험을 저하 시킬 수 있다. 개발자는 최적의 로딩을 위해 애플리케이션 어디에 배치해야할지 결정하는데 어려움을 겪을 수 있다.

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

beforeInteractive : page interactive 되기전에 가져와 실행해야하는 중요한 스크립트의 경우. 해당 스크립트는 서버에서 초기 HTML에 삽입되어 자체 번들 Javascript가 실행되기 전에 실행된다.
afterInteractive (default) : page interactive 이후 가져와 실행 할 수 있는 스크립트의 경우. 해당 스크립트는 클라이언트 측에 주입되어 hydration 후에 실행된다.
lazyOnload : 채팅 지원 및 소셜 미디어 위젯과 같이 로드 시간을 기다릴 수 있는 스크립트의 경우.

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

onLoad를 사용하여 로드 후 코드를 실행 할 수도 있다.

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

Next.js 11의 기본 스크립트 로드 환경을 preloading 및 async 에서 defer 로 변경했다. third-party script는 CSS, font 및 image와 같은 우선 순위가 더 높은 리소스와 우선순위를 경쟁한다.

AfterInteractive를 기본값으로 제공함으로써 최적의 성능을 가질 수 있고 필요에 따라 beforeInteractive를 사용 할 수 있다.

Image Improvements

next/image 를 사용하여 레이아웃 이동을 줄이고 부드러운 시작적 경험을 제공하게 된다.

Automatic Size Detection (Local Images)

Image에 import로 가져온 이미지를 src에 설정하여 정적 이미지의 너비와 높이를 자동으로 정의한다.

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

next/image 는 이제 blur-up placeholders를 지원하여 빈 공간 이미지의 전환을 용이하게 하고 로딩 시간이 줄어든 것 처럼 인지하게 할 수 있다.

import Image from 'next/image'
;<Image src={author} alt="Picture of the author" placeholder="blur" />

Next.js는 또한 백엔드에서 제공하는 사용자 지정 blurDataURL을 제공 할 수 있도록 하여 동적 이미지 blur를 지원한다. 예로 서버에서 blurha.sh를 생성 할 수 있다.

<Image
  src="https://nextjs.org/static/images/learn.png"
  blurDataURL="data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWEREiMxUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
  alt="Picture of the author"
  placeholder="blur"
/>

Webpack5

Next.js 10.2에서는 next.config.js에서 사용자 지정 웹팩 구성이 없는 경우 웹팩 5로 확장했다. 다양한 기능과 개선사항을 제공할 Next.js 애플리케이션에서 Webpack 5를 기본값으로 만들고 있다.

커뮤니티와 협력하여 webpack 5로 원활하게 전활 할 수 있도록 하였으며, webpack 5가 활성화된 상태에서 3,400개 이상 기존 Next.js 통합 테스트가 실행되었다.

애플리케이션에 사용자 지정 웹팩 구성이 있는 경우 webpack 5에 대한 업그레이드 문서를 따르는 것이 좋다.

CRA Migration

Create React App에서 Next.js로 마이그레이션 하는 애플리케이션이 증가했다.

개발자가 애플리케이션을 Next.js로 마이그레이션 하는데 도움을 주기 위해 Create React App 애플리케이션을 Next.js와 호환되도록 자동으로 변환하는 @next/codemod를 도입했다.

변환은 자동으로 pages/ 폴더를 추가하고 CSS import를 올바른 위치로 이동한다. 또한 Next.js에서 Create React App 호환성 모드를 활성화하여 Create React App에서 사용된 일부 패턴이 Next.js와 호환되도록 한다.

npx @next/codemod cra-to-next

Next.js Live (Preview Release)

Next.js. Live는 ServiceWorker, WebAssembly 및 ES Moduels와 같은 첨단 기술을 활용하여 전체 개발 프로세스를 웹 브라우저에서 활용한다. 이렇게 하면 빌드 단계 없이 URL을 사용하여 공동 작업 및 공유가 가능해지며 개발자에게 더 빠른 피드백, 빌드 대기 시간 단축, 브라우저내 실시간 프로그래밍 등을 의미 한다.

Upgrade Guide

Next.js 11에서 소개된 대부분 기능은 사용자에게는 영향을 미치지 않는 변경사항이다. 이러한 레거시 기능은 수년동안 이전 버전과 호환되는 방식으로 유지되고있으며 일부는 v4.0 까지 호환된다.

하지만 몇가지 기능은 코드베이스를 유지 관리 할 수 있도록 제거 되었으며 버전 10에서 11로 업그레이드 하는 바업은 업그레이드 가이드를 참고.

Next.js 11에서 REact 버전이 17.0.2로 업데이트 되었다. 자세한 내용은 React 17 블로그 게시물을 참조하라.

[Ref]:

Next.js 11