NextJs는 굉장히 업데이트가 빈번하고 변경도 많은편이라 가급적 항상 업데이트 정보를 확인하고 즉시 체득하려고 노력합니다.
주요 변경점들은 성능향상 및
next/image의 picture태그 지원과 다크모드 지원이 있습니다.
그중에서 picture 태그를 지원하게 되면서 나아진 점이 무엇인지 알아보겠습니다.
next/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>
);
}
<picture>요소는 여러<source>요소를 사용하여 조건에 따라 다른 이미지를 로드할 수 있습니다.
media 속성은 미디어 쿼리를 정의하며, 사용자의 시스템이 다크 모드인지 라이트 모드인지에 따라
적절한 이미지 소스를 선택합니다.
최종적으로, 어떤<source>도 일치하지 않는 경우에 사용될 기본<img>태그가 있습니다.
이 태그에는 light 이미지의 속성이 적용됩니다(단, srcSet은 제외).
이 컴포넌트는 사용자의 시스템 테마 설정(라이트 모드 또는 다크 모드)에 따라
적절한 이미지를 보여주기 위한 조건부 로직을 사용합니다.
이 방법은 사용자에게 더 나은 사용자 경험을 제공하면서도 시스템 리소스를 절약하는 데 도움이 됩니다.
그리고 app route에 대한 실험적인 turbopack 지원이 추가되었습니다.
Next.js 13.4부터 앱 라우터 애플리케이션의 성능과 안정성을 향상시키는 데 중점을 두었습니다.
13.4와 13.5를 비교하면 새 애플리케이션에서 다음과 같은 개선 사항이 나타났습니다.
-
22% 더 빠른 로컬 서버 시작
-
29% 더 빠른 HMR(Fast Refresh)
-
메모리 사용량 40% 감소
-
느린 작업을 캐싱하거나 최소화하여 작업량 감소
-
비용이 많이 드는 파일 시스템 작업 최적화
-
컴파일 중 증분 트리 순회가 향상되었습니다.
-
불필요한 차단 동기 호출에 대한 레이지로딩 지원
-
대형 아이콘 라이브러리 자동 구성
-
Next.js 사용자 Lattice는 컴파일 속도가 87~92% 더 빨라졌다고 보고했습니다.
현재 번들러 성능을 계속해서 반복하고 개선하는 동시에 Turbopack(베타)도 개발 중 입니다.
병행하여 성능을 더욱 향상시킵니다. 13.5에서는 next dev --turbo이제 더 많은 기능을 지원합니다.
그리고 다양한 버그를 추가적으로 디버깅 해준것으로 확인되기에
approute를 활용한 개발에 부담이 줄어들 것으로 예상됩니다.
