Next.js 12 업데이트 사항 정리

 

 

 

너무나 빠른 Next.js의 업데이트..
저번에 Next.11이 발표된 지 2,3달 정도밖에 안 된 것 같은데, 벌써 12가 발표라니..

거두절미하고 새롭게 업데이트된 사항에 대해 빠르게 알아가 보도록 하자.

 

목차

• 프레임워크에서 사용하던 컴파일러를 Rust 컴파일러로 대체함 : 프로젝트 빌드 속도 증가, 새로고침 속도 증가.
• 미들웨어 : 서버 단에서 미들웨어 처리가 가능한 기능 추가.
• React 18 지원 : React 18 버전을 지원.
• <Image />AVIF 지원 : webP보다 20% 압출률이 더 좋은 AVIF 포맷 지원.
• 봇 인식 ISR 폴백 : Google Bot 등의 웹 크롤러에 최적화된 SEO 동작 관련 내용.
• 네이티브 ES 모듈 지원 : 표준화된 모듈 시스템과의 연계.
• URL 가져오기 : 모든 URL에서 패키지 가져오기, 직접 모듈 설치가 필요 없음.
• React Server Components : 컴포넌트 레벨에서 서버 사이드 단 로직까지 처리할 수 있다는 내용.

 

이번에 개인적으로 관심있게 본 내용은,

1. 내부 컴파일러를 Rust로 변경함으로써 빌드 속도가 대폭 증가
2. 웹 서버 단에 미들웨어 기능을 추가할 수 있게 된 것.
3. React 18...!!
4. <Image> 태그에서 AVIF 포맷 지원...ㅎㄷㄷ;;
5. Bot 인식 ISR Fallback: 요건 뭔지 모르겠지만 봇 인식 처리를 한다니, 갈수록 SEO 전용 프레임워크가 되어가는 느낌.
6. React Server Components: 이제 getServerSideProps 같은 Next.js 전용 코드 패턴이 사라지고 완전히 React 형태로만 사용할 수 있는 느낌..?!

 

이 정도인 것 같다.
(나열해보니 그냥 거의 다 주요 내용이네..😅)

아래에서 각 목차에 대해 상세히 확인해보자.

 

Rust 컴파일러로 변경

이번에 Next.js 에서 Rust 컴파일러로 변경되면서 프로젝트 빌드 속도가 3배 빨라지고, 코드 변경으로 인한 실시간 새로고침 속도는 5배 빨라졌다고 한다. 웹 전용 오픈형 플랫폼인 SWC를 이용하는데, SWC 창시자가 최근 vacel에 합류하신 강동윤 님.

 

아직은 검증 단계이므로 우선 옵션 형식으로 사용 가능하다.

// next.config.js

module.exports = {
  swcMinify: true
}

 

 

Middleware 기능 추가

Next.js 내에서 미들웨어를 구성할 수 있게 됨으로써, 각 미들웨어 로직 별로 유저의 수신 요청에 따라 rewriting, redirecting, 헤더 추가, 스트리밍 HTMl이 가능하게 되었다. 

 

간단한 미들웨어 사용 예시는 아래와 같다.

// pages/_middleware.ts

import type { NextFetchEvent, NextRequest } from 'next/server'

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

 

미들웨어 실행 순서

- package.json
- /pages
    _middleware.ts # Will run on all routes under /pages
    index.tsx
    about.tsx
    teams.tsx

 

위 디렉토리 구조는 pages 하위에 있는 모든 디렉토리 경로에서 실행된다. 

중첩 미들웨어의 경우에도 한번 살펴보자. 미들웨어 동작 방식은 무조건 디렉토리 구조 위에서 아래 형식으로 실행되게 된다.

- package.json
- /pages
    index.tsx
    - /about
      _middleware.ts # Will run first
      about.tsx
      - /teams
        _middleware.ts # Will run second
        teams.tsx

 

만약 위처럼 구성이 되어 있다면, about/teams.tsx 페이지를 호출하게 되면, /about/_middleware.ts를 먼저 실행하고, 이후에 /about/teams/_middleware.ts를 실행 후 /about/teams/teams.tsx에 방문하게 된다.

미들웨어는 처음 파일 시스템을 조회하기 전에 redirects와 headers 직후에 동작하게 된다. 단 빌드 후 발생하는 '/_next' 파일은 제외된다.

 

 

 

미들웨어는 Web API 기준을 엄격히 따른다고 말하고 있다. Web API Response는 MDN서 확인할 수 있다.
미들웨어에 대한 더 자세한 방식은 아래 링크로 참고하면 된다.

Middleware | Next.js

 

 

React 18 지원을 위한 준비 단계

올해 6월 페이스북 팀에서 발표했던 React 18이 이번 Next.js에 적용되면서 'Suspense', startTransition`와 같은 API, 그리고 React.lazy를 위한 서버 렌더링 관련 새로운 스트리밍 API를 사용하기 위한 준비를 하고 있다고 한다.

아래는 React18을 기반으로 실험 베타 버전으로 지원하는 기능들이다.

 

Server-Side Streaming

서버 측 Suspense 및 SSR 스트리밍 지원에 대한 기본 제공 지원을 하고, 이를 통해 HTTP 스트리밍을 사용해서 페이지를 서버 렌더링 할 수 있다고 한다. 

해당 기능을 이용하려면 아래처럼 활성화시킬 수 있다.

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

솔직히 요건 어떤 건지 정확히 모르겠다.. 따로 찾아보려고 했는데 Server-Side Streaming 관련된 내용도 없고.. 우선 패스하자 🙏

 

React Server Components

React Server Components를 이용하면, Component 레벨에서 동작하는 모든 것을 서버 단에서 처리할 수 있게 된다. 예를 들어 useEffect()의 경우에는 무조건 클라인트 단에서 실행이 되고, 해당 클라이언트 단에서만 실행할 수밖에 없는 로직으로 인해 useEffect() 내에서 처리해야 하는 것들이 있는데, 이것들을 서버 단에서 모두 처리하게 됨으로써 PreRendering에 대한 이점을 더 넓게 가져갈 수 있게 되었다.

또한 Next.js의 서버 사이드 처리를 위한 특수 패턴인 getServerSideProps 또는 getStaticProps 등의 코드도 더 이상 필요하지 않게 된다고 소개하고 있다.

해당 기능을 이용하려면 아래처럼 활성화시킬 수 있다. 

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

 

모든 Next.js 페이지의 이름을. server.js로 변경하여 서버용 컴포넌트를 만들고, 서버용 컴포넌트 내부에서 직접 클라이언트 컴포넌트를 가져올 수 있다. 이러한 방식은 브라우저 단에서 Hydration 처리가 된다고 한다.
우선 요거는 향후 버전에서 Server-side Suspense, 부분적 Hydration, 스트리밍 렌더링을 위한 절차라고 한다.

 

 

ES Modules 지원, 그리고 URL Imports

그냥 Next.js11 버전부터 CommonJS 모듈보다 우선순위가 높은 ES 모듈을 활성화시키려고 이것저것 적용 실험을 진행하고 있다는 얘기여서, 주요한 내용은 없음.

 

URL Imports

URL 자체로 외부 모듈을 Import를 할 수 있는 기능이고, 아직 실험 단계이다.

사용법은 아래와 같다.

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

 

또는 아래처럼 사용할 수 있다.

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

 

 

Bot-인식을 통한 ISR Fallback 처리

ISR(Incremental Static Generation) 페이지에 대한 개념을 모를 수도 있으니, 우선 간단히 설명하겠다. 
Next.js에서 특정 페이지를 정적 페이지로 빌드 타임에 렌더링을 해버리는 getStaticProps()가 있는데, 이렇게 미리 빌드 타임에 렌더링을 하면, 빌드 시 요청했던 모든 데이터들은 그대로 고정이 된다. 따라서 그 당시 APi 요청 등으로 가져온 데이터가 이후에 업데이트가 되어도, 해당 페이지에서는 변함없이 정적 페이지로 유저에게 내려준다. 

그러나 ISR 처리를 하면, 주기적으로 해당 페이지를 새롭게 렌더링을 해서 업데이트를 해서 주기적 정적 페이지를 최신으로 업데이트시킬 수 있다. 

ISR 페이지에서 Fallback: true 처리를 하면, 유저 요청 후 아직 새롭게 렌더링 된 페이지를 보여주기 전에, 렌더링이 완료하기 전까지는 이전에 가지고 있던 정적 페이지를 임시로 먼저 보여주게 된다. 그러나 만약 크롤러 봇이 해당 페이지에 방문하여 크롤링하는데 도중에 페이지가 변경되어 버리면 의도하지 않은 크롤링 수집이 되어버리고 만다.

Next.js 12에서 웹 크롤러(예: 검색 봇)는 크롤러가 아닌 일반 유저에게는 ISR 페이지의 기존 동작을 그대로 수행하도록 하지만, 일반 유저에게는 User-Agent를 통해 유저인지 판단하고 기존대로 폴백 상태의 동작을 수행할 수 있다. 

Smaller Images using AVIF

최신 이미지 압축 포맷인 WebP보다 더 최신인 AVIF라는 형식이 있는데 Next.js 12 버전에서부터 이 포맷 형식을 <Image> 태그에서 옵션으로 사용할 수 있다.

Next.js에서는 WebP보다 20% 더 작은 이미지로 압축하여 사용할 수 있지만, WebP에 비해 최적화하는데 시간이 더 오래 걸릴 수 있어서 next.config.js에서 옵션으로 이용할 수 있다고 한다. 

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

 

브라우저가 AVIF를 지원할 때만 정상적으로 제공이 되고, 그렇지 않으면 WebP를 지원하는지 판단 후 WebP를 제공하는 방식이다. 모두 제공되지 않으면 원본 이미지 형식이 제공된다.

 

---

 

이번 업데이트 사항은 여기까지이다.
이번에도 Next.js 프레임워크는 멋지게 발전했다... (완전 사랑한다 Next.js..)

Next.js 최신 버전으로 업데이트하는 법

npm i next@latest

yarn upgrade next@latest

 

지금 바로 Next.js 12로 업데이트 하자!