Exploring Next.js 11 - What Is New

24 Jul 2021

이 글에서, 여러분은 Next.js의 11버전에서 소개된 새롭게 더해진 특징들에 대해 배울겁니다.

Vercel의 팀은 6월 15일에 열린 Next.js 컨퍼런스에서 Next.js의 11버전을 공개했습니다. 만약 이 글을 읽고있으며 Next.js가 무엇인지 모른다면, Next.js는 리액트의 프레임워크로서 별도의 환경설정을 할 필요 없이 server-rendering, hybrid static, TypeScript support, smart building, route prefetching등과 같이 배포(production)에 필요한 모든 기능들을 지원함으로써 최고의 개발 환경을 제공합니다.

Vercel은 오픈웹의 번영을 위해 최선을 다하고 있습니다. Next.js 11버전은 더욱 빨라졌고 사용하기 쉬워졌지만, 가장 중요한 부분은 앱의 품질 기준을 올렸다는것에 있습니다. 새로운 Next.js 11버전에서는 웹 브라우저를 사용하는 모든 사람들이 실시간으로 작성되는 앱에 접근하거나 공동으로 작업할 수 있게 만들었습니다.

이 글에서, Next.js의 11버전을 살펴보고 새롭게 추가된 특징들을 소개해보도록 하겠습니다. 11버전은 기본적으로 아래의 7가지 특징들을 포함합니다.

Improved performance
Script Optimization (next/script)
Image Improvements (next/image)
Conformance
Create React App Migration (@next/codemod)
Support for webpack 5
Next.js Live

더이상 지체할것 없이, 한번 살펴보도록 하겠습니다.

Improved performance

새로운 버전의 Next.js에서 추가된 제가 가장 좋아하는 기능은 바로 성능 향상이며 이것은 사용자에게 있어서 이점으로 작용합니다 - 단순히 Next.js의 버전을 최신으로 유지함으로서 여러분의 능률이 향상될테니까요. 예를들어, 10버전의 Next.js에서부터는 React Fast Refresh를 통한 변화로 앱의 시작 속도는 24%가 빨라졌으며 일의 처리 속도는 40%가 향상됐다고 보고되었습니다. 이러한 속도 향상을 즐기기 위해 여러분의 개발 실력이 바뀔 필요가 없습니다.

또한 웹팩을 위한 바벨 로더(Babel loader)의 업데이트는 로딩 시간을 최적화 해주었으며 메모리 안에서 구성 캐싱 레이어(config caching layer)를 추가합니다. 이것은 개발자들이 적응할 필요 없이 성능 향상에 이점을 주는 또다른 개선 사항입니다.

이런 기능을 사용하기 위해, 여러분은 아래의 명령문 실행을 통해 Next.js를 최신 버전으로 유지해야 합니다.

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

Script Optimization

Next.js는 스크립트 컴포넌트(Script Component)라고 불리는 새로운 타입의 컴포넌트를 출시했습니다. 이 컴포넌트는 개발자의 시간을 절약하고 로딩 성능의 향상을 위해 개발자들이 써드-파티 스크립트(third-party scripts)들의 로딩 우선순위를 결정할 수 있게 해줍니다.

웹사이트들이 종종 analytics, ads와 같은 써드-파티 스크립트들과 통합되어야 할 필요성이 있기때문에, 개발자들은 최적의 로딩과 적절한 실행을 위해 스크립트들을 우리의 어플리케이션에서 어디에 두어야 할지 자주 고민합니다.

그래서 next/script 를 사용하면 strategy prop을 통해 우선순위를 설정하는 동안, Next.js가 자동적으로 로딩 성능의 향상을 위해 스크립트들을 우선순위화 합니다.

스크립트 컴포넌트는 다음 세가지 모드들을 지원합니다:

beforeInteractive
봇 감지(bot detection)나 동의 관리(consent management)와 같이 페이지와 상호작용이 가능하기전에 검색되거나 실행되어야 하는 매우 중요한 스크립트들이 있는 경우에 사용됩니다.
afterInteractive
태그 매니저(tag managers)와 분석(analytics)와 같이 페이지가 상호작용이 가능한 이후에 가져오고 실행해야 할 때 사용됩니다.
lazyOnLoad
채팅 지원이나 소셜 미디어 위젯과 같이 로드될 때까지 기다릴 수 있는 경우 사용됩니다.

<Script
  src="your address"
  strategy="beforeInteractive" // lazyOnload, afterInteractive
/>

로딩 이후에 코드 실행 또한 가능합니다. 예를 들어, 사용자가 동의서에 답할때까지 코드의 실행을 기다릴 수 있습니다.

<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 로 바뀌었습니다. 써드-파티 스크립트들은 자주 더 높은 우선순위의 리소스와 경쟁합니다. 이러한 리소스와 기타 스트립트들의 적절한 순서를 유지하는 것은 개발자들에게 있어 부담스러운 작업이었습니다.

개발자들은 이제 afterInteractive 나 beforeInteractive 를 지원하는 스크립트 컴포넌트를 사용함으로써 최적의 성능을 위한 향상된 기본 환경을 가지게 되었습니다.

구글 크롬팀에서 작성한 RFC와 challenges with preload를 읽어보고 기본 환경 변화의 기술적 선택에 관해 자세히 알아보세요.

Image Improvements

Next.js의 11버전의 새로운 기능들이 next/image 컴포넌트에 추가되었습니다. 이 컴포넌트는 CLS(Cumulative Layout Shift)를 줄이면서 사용자에게 직관적인 시각적 경험을 제공합니다.

Automatic Size Detection for Static Images

지금까지는 이미지 컴포넌트를 사용해서 이미지들을 랜더링할때 높이와 넓이 props가 요구되었습니다. 이러한 props는 Next.js가 이미지의 사이즈를 확인하고 placeholder를 랜더링 하게 했습니다. 레이아웃의 이동과 정리되지 않은 유저 인터페이스를 방지하면서 말이죠.

<Image alt="My Picture" src="/david.png" width={700} height={475} />

하지만 11버전에서는 높이와 넓이 props를 지정하지 않아도 됩니다. 왜냐하면 Next.js 11버전에서는 정적인 이미지의 넓이와 높이를 자동적으로 정의하기 위해 이미지 소스(image src)를 위한 import 키워드를 지원합니다.

import image from "next/image";
import profile from "...profile/david.png";

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

Image Placeholders

또한, Next/js 11버전의 next/image 컴포넌트는 느린 인터넷 속도에서 이미지를 흐리게 셋팅해주는 새로운 placeholder의 prop인 blur를 지원합니다. 이 prop은 next/image 컴포넌트가 처음 이미지 로딩시에 흐리고 낮은 해상도의 이미지를 보여줍니다.

이미지 컴포넌트에 placeholder=”blur” 를 추가해보고 사용해보세요.

<Image src={image} alt="My picture" placeholder="blur" />

이미지 컴포넌트는 처음 이미지가 완전히 로드되기 전까지 몇초동안은 흐린 이미지를 보여줄겁니다.

Next.js의 새로운 버전에서는 또한 Image 태그의 백엔드에서 제공하는 blurDataURL prop을 사용해 흐린 동적 이미지를 지원합니다. 서버에서 blurha.sh와 같은 어플리케이션을 이용하여blurDataURL을 커스텀하게 생성할 수도 있습니다.

<Image
  src="your image sources"
  blurDataURL="the url to your custom image"
  alt="My picture"
  placeholder="blur"
/>

Conformance

첫번째로, 한번 알아보도록 하죠: 부합성(Comformance)는 무엇일까요? 구글 웹 플랫폼 팀에 의하면 부합성이란 구글에서 사용하는 용어로써 최적의 사용자 경험(UX)을 지원하기 위해 세심하게 만들어진 솔루션을 제공하는 시스템이라고 합니다.

큰 규모의 어플리케이션(구글 맵이나, Photos 그리고 구글 검색등)을 제작한 구글 웹 플랫폼 팀의 경험에서 프레임워크가 어플리케이션의 질과 성능에 얼마나 중요한 영향을 미치는지 증명했습니다. 프레임워크가 안정적인 셋팅 시스템과 보안성을 갖추었을때, 개발자들은 기능을 추가하고 확장하는데 있어 자신들의 어플리케이션과 제품에 집중할 수 있습니다.

구글 웹 플랫폼 팀은 자바스크립트의 생태계에서 부합성을 찾기 시작했으며, 최근에는 Next.js를 위한 부합성과 함께 자기들의 시스템을 오픈소싱 하기 시작했습니다.

이제 Next.js는 부합성의 많은 최적의 사례들을 통합할 것이며 즉, 이 뜻은 개발자들이 하나하나 모든것을 신경 쓸 필요 없이 성능, 보안, 접근성과 같은 것들을 지원해 준다는 것입니다.

예를 들어, Next.js에서는 이제 ESLint를 지원하므로 개발하는 동안에 Next.js의 구체적인 이슈들을 체크할 수 있게 되었습니다. ESLint는 강제하고 가이드라인을 설정함으로써 여러분의 팀이 개발하거나 확장하는 동안에도 모범 사례(best practices)들을 지킬 수 있도록 해줍니다.

ESLint 통합은 새로운 버전의 Next.js와 기존의 Next.js 어플리케이션에도 작동됩니다. ESLint를 사용하기 위해 Next.js를 11버전으로 업데이트 후에 npx next lint 를 실행하세요.

Support for webpack 5

Next.js 10.2버전에서 next.config.js 의 설정 없이 사용이 가능한 웹팩5의 지원을 발표했습니다. 11버전에서부터는 웹팩5는 모든 Next.js 어플리케이션에서 기본으로 설정 되어있습니다. 새롭게 만들어진 Next.js 어플리케이션은 웹팩5의 최적화와 특징들도 함께 사용할 수 있게 됩니다. 하지만 커스텀하게 설정이 된 전 버전의 어플리케이션의 경우, 해당 문서 참조하기를 추천합니다.

Create React App Migration

Vercel 팀은 또한 새로운 도구인 @next/codemod 를 소개했습니다. 이것은 CRA 어플리케이션을 자동적으로 Next.js와 호환되도록 자동적으로 변환시켜줍니다.

CRA 마이그레이션은 제가 가장 좋아하는 특징중 하나입니다. 왜냐하면 이것은 개발자들이 CRA 어플리케이션을 Next.js로 변환시킬 수 있도록 도와주기 때문입니다. 이것은 자동적으로 pages 경로를 추가하고 CSS import 들을 적절한 경로로 이동시켜줍니다. 또한 CRA 프로젝트의 기능들은 유지하면서 점진적으로 Next.js를 적용시킬수도 있습니다.

CRA 프로젝트를 마이그레이션 하기 위해서 아래의 명령어를 실행시키면 됩니다.

npx @next/codemod cra-to-next

하지만 이 기능은 현재 실험단계에 있습니다.

Next.js Live

Next.js Live는 Next.js 11버전에서의 필수 기능중 하나라고 말할 수 있습니다. Vercel의 미션은 개발을 좀 더 즐겁고 포괄적으로 만드는겁니다. 이 팀은 브라우저 내에서 공동 개발 환경을 제공하기 위하여 ServiceWorker, WebAssembly 그리고 ES Modules과 같은 기술들을 소개했습니다.

Live의 특성으로, 개발자들은 빌드 단계 없이 URL을 공유함으로써 실시간으로 협업할 수 있게되었습니다. 정말 놀랍지 않나요? 즉, 여러분은 이제 실시간으로 브라우저 안에서 피어 프로그래밍(peer programming)과 편집을 하며 피드백을 즉각적으로 받을 수 있게 됐습니다.

이 기능은 얼리 액세스 단계입니다.

Conclusion

재미있게 읽으셨나요? 저는 Next.js 11버전의 새롭고 놀라운 특징들이 굉장히 흥미롭습니다.

최적의 사용자 경험을 지원하는 환경적 시스템인 부합성(Conformance)에서 시작해서 시작 시간을 단축하는 성능 개선에 이르기까지, 이미지와 스크립트의 로딩을 향상시키는 특징들과 그리고 실시간으로 브라우저에서 협업할 수 있는 능력까지 - 정말로 Next.js팀은 최고의 개발 환경을 만들기 위해 최선을 다하고 있습니다.

저는 Vercel팀이 하는 일과 그들의 Next.js의 개발 방향을 정말 좋아합니다.

전 버전의 프로젝트가 있다면 11버전으로 업데이트를 해보세요 그리고 아래 여러분의 생각을 댓글로 달아주세요.

원문: Exploring Next.js 11: What Is New by David Adeneye Abiodun