Next.js 13.5

9월 13일에 Next.js의 13.5 버전이 출시되었다.

 

사실 지금 13.5.4까지 나와있고 지금 다루기에는 조금 늦은 감이 있지만,

몇 주정도 토이 프로젝트에 적용해서 써보았는데 실제 체감되는 점도 좋은 정보가 될 수 있을 것 같아 바뀐 점과 함께 적어보려고 한다.

 

업데이트 방법

버전 업데이트를 위해서는 아래 커맨드를 입력하면 된다.

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

개발자 경험 향상

- 로컬 서버를 실행 속도 22% 향상

- HMR 속도 25% 향상

 

로컬 서버 속도

먼저 Next 13.5.4에서 로컬 서버 실행 속도를 체크해 보면 이 정도로 나오는데,

이전 버전에는 서버 실행 속도가 나오지 않지만 같은 환경에서 비교해 본 결과 확실히 13.5.4가 빠르고 실제 개발을 할 때도 빨라졌음을 느낄 수 있었다.

(빨라지면 당연히 좋기는 하지만 사실 이전에도 이미 많이 빨랐어서 오버 엔지니어링이 아닌가 라는 생각이 들긴 한다.)

 

HMR 속도

왼쪽이 v13.4.9 오른쪽이 v13.5.4인데 확실히 25% 정도 속도가 향상된 것 같다.

프론트는 계속 수정하면서 브라우저에서 체크할 일이 많은데,

그래서인지 10ms~20ms 정도의 차이지만 체감은 꽤 크게 다가오는 것 같다.

 

성능 최적화

next start에서의 메모리 사용이 40프로 감소했다고 한다.

 

next/image

next/image를 사용하려면 기존에는 Image라는 컴포넌트를 사용해야 했지만,

이제 unstable_getImgProps()를 사용해 구현할 수 있게 되었다.

import { unstable_getImgProps as getImgProps } from 'next/image';
 
export default function Page() {
  const common = { alt: 'Hero', width: 800, height: 400 };
  const {
    props: { srcSet: dark },
  } = getImgProps({ ...common, src: '/dark.png' });
  const {
    props: { srcSet: light, ...rest },
  } = getImgProps({ ...common, src: '/light.png' });
 
  return (
    <picture>
      <source media="(prefers-color-scheme: dark)" srcSet={dark} />
      <source media="(prefers-color-scheme: light)" srcSet={light} />
      <img {...rest} />
    </picture>
  );
}

이 예시는 media-query를 통해 라이트/다크 모드 이미지를 구현하는 코드인데,

unstable_getImgProps를 통해 위와 같은 구현은 물론이고,

background-image나 image-set, canvas의 drawImage, new Image()와 같은 구현도 가능하게 되었다.

 

확실하지는 않지만 next에서 image preload를 진행할 때 new Image와 getImgProps()를 연계해서 사용할 수 있을 것이라고 생각이 든다.

 

마무리

위와 함께 400개 이상의 버그도 함께 수정되었다고 한다.

큰 변화는 없지만 hmr이 생각보다 꽤 체감되는 것 같고, next/image를 사용할 때 Image 컴포넌트에 한정되어서 거의 커스텀이 힘들다는 생각을 가지고 있었는데, vercel의 개발자를 포함한 다른 개발자들도 이러한 생각들을 하고 있는 것 같다.