Next.js 12

늦은 감이 있지만 Next.js Blog Next.js 12 글을 공부 겸 번역해보려 한다.

| 해당 내용은 Next.js 12에 대한 개인적인 공부를 위한 번역 글로 오역 및 개인적인 의견이 반영된 내용이 있을 수 있으니 참고하여 주시기 바라며 문제가 되는 내용이 있는 경우 메일로 피드백 부탁합니다.

intro

2021.10.27에 올라온 글로 Next.js 12에 대한 릴리즈 내용을 정리한 글이다. 간략하게 목차별로 내용은 아래와 같다.

• Rust Compiler: ~3x 더 빨라진 Fast Refresh 그리고 ~5x 더 빠른 build
• Middleware (beta): Next.js에서 유연하게 코드를 구성할 수 있도록 활성화
• React 18 Support: Native Next.js API와 Suspense 지원
• <Image /> AVIF Support: AVIF 20% 더 작은(압축된) 이미지 허용
• Bot-aware ISR Fallback: 웹 크롤러에 최적화된 SEO
• Native ES Modules Support: 표준화된 모듈 시스템
• URL Imports (alpha): 모든 URL에서 패키지 가져오기, 설치 불필요
• React Server Components (alpha): SSR 스트리밍 지원

Faster builds and Fast Refresh with Rust compiler

프로덕션 환경을 위해서 Next.js 애플리케이션을 더 빠르게 빌드하고 로컬 개발에서 즉각적인 피드백을 받을 수 있도록 Next.js 12에는 네이티브 컴파일인 Rust 컴파일러를 포함하였다.

Rust 컴파일러는 개방형 플랫폼인 SWC를 기반으로 한다. 로컬에서는 ~3x 더 빠른 새로고침과 프로덕션으로 ~5x 더 빠른 빌드로 번들링 및 컴파일을 최적화한다.

| Results from using the new Rust compiler with large Next.js codebases.

• 대규모 코드 베이스에 대한 추가 속도 향상: 세계에서 가장 큰 Next.js 코드 베이스 중 일부를 사용하여 Rust 컴파일러 검증
• 성능 측정을 위한 개선: 컴파일된 모듈 및 파일 수를 포함하여 클라이언트 및 서버 컴파일에 대해 콘솔에서 빠르게 출력
• 기본 웹팩 개선 사항: 빠른 새로고침을 최적화하고 안전성 향상, 웹팩 개선사항 적용

Rust를 사용한 컴파일은 Babel보다 ~17x 빠르며 기본적으로 Next.js 12에서 Javascript 및 Typescript 파일 변환을 대체한다.

새로운 Rust 컴파일러는 이전 버전과 호환되며 기존 Babel 구성이 있는 경우 자동으로 선택 해제된다. styled-components, emotion 그리고 relay 등 인기 있는 라이브러리에 대한 구문 분석도 곧 이식될 예정이다.

minify를 위해 Rust 컴파일러를 사용하도록 선택할 수 있으며 이것은 Terser보다 ~7x 빠르다.

// next.config.js

module.exports = {
  swcMinify: true,
}

Rust 생태계에 지속적으로 투자 중이며 자세한 내용은 데모를 시청하도록 안내하고 있다. (watch our demo)

Introducing Middleware

Next.js에서 미들웨어를 사용해서 요청이 완료되기 전에 코드를 실행하여 사용자의 요청에 따라 rewriting, redirecting, adding headers 또는 HTML 스트리밍을 통해 응답을 수정할 수 있다.

| Middleware gives you complete flexibility inside Next.js.

미들웨어를 사용하여 페이지 내의 아래와 같은 기능들 추가가 가능하다.

• Authentication
• Bot protection
• Redirects and rewrites
• Handling unsupported browsers
• Feature flags and A/B tests
• Server-side analytics
• Advanced i18n routing requirements
• Logging
• And more!

미들웨어는 fetch와 같은 표준 웹 API를 지원하는 strict runtime을 지원한다.

Next.js에서 미들웨어를 사용하려면 page/_middleware.js 파일을 생성 해야 한다. 아래 예에서는 표준 웹 API에 대한 응답이다.

// pages/_middleware.js

export function middleware(req, ev) {
  return new Response('Hello, world!')
}

자세한 내용은 Next.js Conf 데모를 시청하거나 설명서를 확인.

Preparing for React 18

React 18에는 Suspense, automatic batching of updates, startTransition과 같은 API 및 SSR을 위한 React.lazy를 지원하는 스트리밍 API와 같은 기능들이 추가된다.

Next.js는 Facebook React팀과 협력하여 React 18용 Next.js를 준비했다고 한다.

npm install react@alpha react-dom@alpha

Server-Side Streaming

React 18의 Concurrent 기능에는 서버 측 Suspense 및 SSR 스트리밍 지원에 대한 기본 제공 지원이 포함된다. 이를 통해 HTTP 스트리밍을 사용하여 페이지를 서버렌더링 할 수 있다. 이것은 Next.js 12의 실험적 기능으로 활성화하면 SSR은 미들웨어와 동일한 strict runtime을 사용한다.

활성화를 위해서는 config 설정 concurrentFeatures: true:

// next.config.js
module.exports = {
  experimental: {
    concurrentFeatures: true,
  },
}

React Server Components

React Server Components를 사용하여 컴포넌트를 포함한 모든것을 서버에서 렌더링 할 수 있다.

// next.config.js
module.exports = {
  experimental: {
    concurrentFeatures: true,
    serverComponents: true,
  },
}

Next.js에서 React Server Components를 사용하여 컴포넌트 수준에서 데이터를 가져와 작업을 단순화할 수 있다. getServerSideProps 또는 getStaticProps와 같은 기능은 더 이상 필요하지 않으며 이는 컴포넌트와 함께 데이터를 가져오는 React Hooks Model과 유사하다.

모든 Next.js 페이지의 이름을 .server.js로 변경하여 서버 컴포넌트를 만들고 서버 컴포넌트 내부에서 직접 클라이언트 컴포넌트를 가져올 수 있다.

현재 Next.js에서 서버 측 Suspense, 선택적 수화 및 스트리밍 렌더링 작업을 하고 있으며 추후에 진행 상황을 공유할 예정이라고 한다.

ES Modules Support and URL Imports

ES 모듈은 표준화된 모듈 시스템을 Javascript로 가져온다. 모든 주요 브라우저와 Node.js에서 지원이 된다.

이 표준은 더 작은 패키지와 Javascript 번들을 활성화하여 웹 생태계를 발전시켜 궁극적으로 더 나은 사용자 경험을 제공한다. Javascript 생태계가 CommonJS에서 ES 모듈로 이러한 개선 사항을 점진적으로 채택할 수 있도록 최선을 다하고 있다고 한다.

Next.js 11.1부터 CommonJS 모듈보다 우선순위가 높은 ES 모듈에 대한 실험 지원을 추가했으며 Next.js 12에서는 이제 기본값으로 동작한다. CommonJS만 제공하는 NPM 모듈 가져오기는 계속 지원은 된다.

URL Imports

URL을 통해 ES 모듈 가져오기 위한 실험적인 기능을 포함하고 있으며 설치 또는 별도의 빌드단계가 필요하진 않다.

URL 가져오기를 사용하여 URL을 통해 직접 모든 패키지를 사용할 수 있으며 Next.js는 원격 HTTP(S) 리소스를 로컬 종속성과 똑같이 처리할 수 있다.

URL 가져오기가 감지되면 Next.js는 원격 리소스를 추적하기 위해 next.lock 파일을 생성하고 URL 가져오기는 오프라인에서 작업이 가능하도록 로컬 캐시 된다.

config 설정을 통해 URL 추가 설정이 가능하다.

module.exports = {
  experimental: {
    urlImports: ['https://cdn.skypack.dev'],
  },
}

위처럼 설정 이후에는 직접적으로 URL에서 모듈을 가져올 수 있다.

import confetti from 'https://cdn.skypack.dev/canvas-confetti'

Bot-Aware ISR Fallback

증분 정적 재생성은 fallback: true를 사용한 경우 아직 생성되지 않은 페이지에 대한 첫 번째 요청의 페이지 내용을 렌더링하기 전에 fallback 상태를 렌더링한다. 이를 차단하려면 fallbcck: 'blocking'을 사용해야 한다.

Next.js 12에서 웹 크롤러는 fallback: true를 사용하여 ISR 페이지를 자동으로 서버 렌더링하는 동시에 크롤러가 아닌 User-Agent에 대한 폴백 상태의 이전 동작을 계속 제공한다.

Smaller images using AVIF

내장된 Image Optimization API는 이제 AVIF 이미지를 지원하여 WebP에 비해 20% 더 작은 이미지를 가능하게 한다.

AVIF 이미지는 WebP에 비해 최적화하는 데 시간이 더 오래 걸릴 수 있으므로 next.config.js의 새로운 images.formats 속성을 사용하여 이 기능을 선택하도록 한다.

module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
}

해당 포멧 목록은 요청 시 Accept 헤더를 사용하여 최적화된 이미지 형식을 결정하는 데 사용된다. AVIF가 첫 번째이기 때문에 브라우저가 AVIF를 지원하는 경우 AVIF를 제공한다. 만약 두 가지 형식 모두 지원하지 않는 경우 원본 이미지 형식을 제공한다.

Output File Tracing

Next.js 8에서 도입된 target 옵션이 이상적이지 않다는 것을 깨닫고 @vercel/nft를 만들었다고 한다. @vercel/nft는 2년간 Vercel 플랫폼의 모든 배포에 사용되었고 target 옵션에 비해 크게 개선된 접근 방식을 제공한다고 한다.

Next.js 12는 @vercel/nft를 사용하여 페이지 및 API 경로에 필요한 파일을 자동으로 추적하고 Next.js에서 이러한 추적을 활용할 수 있도록 한다.

이러한 변경은 Docker와 같은 도구를 사용하여 배포하는 애플리케이션에 최적화 되어 Next.js output을 독립 실행형으로 만들어 애플리케이션 실행을 위해 종속성을 설치할 필요가 없게 하므로 Docker 이미지 크기를 줄일 수 있다.

@vercel/nft를 가져오면 target 접근방식이 대체되어 더 이상 target 접근 방식은 Next.js 12에서 사용되지 않는다고 한다. 자세한 내용은 설명서를 확인.

Other Improvements

• 이제 애플리케이션에 pages/_app.js 또는 pages/_document.js를 추가하면 Next.js CLI를 재부팅 할 필요 없이 기본 제공 버전이 자동으로 변경
• ESLint 통합은 이제 --file 플래그를 사용하여 단일 파일 린트를 지원
• 사용자 지정 tsconfig.json 경로 설정을 지원
• next.config.mjs는 이제 구성을 ES 모듈로 작성하는 데 지원
• getStaticProps에 대해 진행 중인 요청이 중복 제거
• 빠른 새로고침이 EventSource 연결 대신 WebSocket 사용

Breaking Changes

• Next.js 11에서 webpack 5를 기본으로 설정한 후 공식적으로 webpack 4를 제거
• next.config.js에서 이제 target 옵션은 불필요
• next/image는 이제 래핑 요소로 div 대신 span
• ES 모듈을 지원하는 최소 Node.js 버전은 12.0.0에서 12.22.0으로 상향

자세한 내용은 업그레이드 가이드 확인

[Ref]:

• Next.js 12