Next.js 12 업데이트

리액트의 프레임워크인 넥스트 js가 6일전 12버전으로 업데이트 되었습니다.
얼마전 11버전이 업데이트 됐다는 소리를 들었던 것 같은데, 참 열일하네요 Vercel🔥

구체적인 업데이트 목록은 다음과 같습니다.

• 더욱 빨라지는 빌드&새로고침 속도
• 미들웨어 추가
• React 18버전 지원
• React Server Component
• Image 태그의 AVIF 포맷 지원
• URL 가져오기 기능

이 글은 간단 요약 글이고 빠진 것도 많으므로 더욱 자세한 사항을 알아보시려면 이곳에서 원문을 보시면 되겠습니다.

---

더욱 빨라지는 빌드&새로고침 속도

Vercel는 이번 버전에 Rust 컴파일러를 포함시켜 더욱 빨라진 빌드&새로고침 속도를 갖게 되었다고 합니다. Rust 컴파일러는 SWC를 기반으로 하고 있으며 로컬에서는 3배 더 빠른 새로고침 속도를, 프로덕션에선 5배 더 빠른 빌드 속도를 보여준다고 합니다. 특히 Babel에 비해 Rust의 컴파일 속도는 무려 17배나 빠르다고 하네요.

현재는 옵션 형식으로 적용이 가능합니다.

// next.config.js

module.exports = {
  swcMinify: true
}

미들웨어 추가

이제 코드가 아닌 구성으로써 사용할 미들웨어 추가를 할 수 있게 됩니다.
자세한 내용은 넥스트 js의 미들웨어 설명에서 확인해 보세요!

React 18v 지원 준비

페이스북이 업데이트한 리액트 18v의 Suspense, startTransition, React.lazy와 같은 API를 사용하기 위한 준비를 하고 있다고 하네요

React Server Component

넥스트 고유의 처리 방식인 getServersideProps, getStaticProps가 추억 속으로 사라질 수 있겠네요.
React Server Component를 사용하면 서버단에서 로직을 처리할 수 있다 합니다.
페이지의 이름을 .server.js 로 변경하면 서버용 컴포넌트를 만들 수 있고,
이 서버용 컴포넌트 내부엔 클라이언트 컴포넌트도 가져올 수 있습니다.

쉽게 말하면 이제 별다른 처리 없이 .server.js라고 파일명만 변경하면 SSR이 된다는 뜻입니다. 게다가 하이브리드 형태인 서버+클라이언트 컴포넌트도 쉽게 만들 수 있구요.

다음 같이 설정한 뒤에 사용할 수 있다고 하네요.

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

Image 태그의 AVIF 포맷 지원

jpg, png, webp등 다양한 이미지 포맷 중 가장 압축률이 높은 포맷인 AVIF 포맷을 Image 태그의 옵션으로 사용할 수 있게 됩니다.
AVIF 포맷은 webp 포맷에 비해 20% 더 압축된 이미지 포맷입니다.

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

브라우저가 avif 포맷 혹은 webp 포맷을 지원하지 않으면 원본 이미지 포맷으로 제공한다고 하네요~

URL 가져오기 기능

패키지를 설치하기 위해서는 npm 혹은 yarn을 많이 사용하시죠?
URL을 이용해 가져오는 기능이 생겼네요. 단 아직은 실험단계라고 합니다.

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

또는 아래 처럼 사용 가능합니다.

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

---

이상으로 간략하게 Next js의 최신 버전 업데이트에 대해 살펴봤습니다.
제가 처음 Next를 사용했던 버전이 9버전이었던 것 같은데 그 시점과 비교해보면 점점 더 빨라지고 기능적으로도 간편해지는게 보이네요.

이번 버전 업데이트에 대한 영상 링크 마지막으로 줄이도록 하겠습니다 :)

영상 보기