더욱 향상된 NextJS: Next.js 13.5 버전 소식

NextJs 13 logo
nextjs 13 logo

프론트엔드 개발자들에게는 즐거운 소식입니다. NextJs 13.5버전이 릴리즈 되었습니다. 🎉 한국 사람들이 읽기 쉽게 원본글을 번역했습니다. NextJs을 애용하는 입장에서 반가운 소식이네요. (공부할 것도 많아졌네요 🥲)

💡

해당 글은 NextJs 13.5 소식을 번역하고 각색한 글입니다.

Next.js 13.5
Next.js 13.5 includes 22% faster local server startup, 29% faster HMR (Fast Refresh), 40% less memory usage, and more.

목차


요약

  • 로컬 서버 시작이 22% 빨라짐: 앱 & 페이지 라우터로 더 빠르게 반복 작업
  • HMR (Fast Refresh)이 29% 빨라짐: 변경 사항을 저장할 때 더 빠른 반복 작업 가능
  • 메모리 사용량 40% 감소: next start 실행 시 측정됨
  • 패키지 임포트 최적화: 유명한 아이콘 및 컴포넌트 라이브러리를 사용할 때 더 빠른 업데이트
  • next/image 개선: <picture>, 아트 디렉션, 다크 모드 지원
  • 그 외 438개 이상의 버그 패치!

오늘 업그레이드하고 10월 26일 Next.js Conf에 등록하세요:

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

시작 시간과 Fast Refresh 시간 개선

앱 라우터의 지속적인 적용을 보게 되어 기쁩니다. 현재 월 대비 80% 성장을 보이고 있으며, 이는 HTTP 아카이브가 크롤링한 상위 1000만 개의 출처를 기준으로 합니다.

2023 CRuX Dataset for Top 1 Million Mobile Sites on the Web

Next.js 13.4 이후로, 우리의 초점은 앱 라우터 어플리케이션의 성능과 신뢰성을 향상시키는 것이었습니다. 13.4와 13.5를 비교했을 때, 새로운 애플리케이션에서 다음과 같은 개선을 확인하였습니다:

  • 로컬 서버 시작이 22% 빨라짐
  • HMR (Fast Refresh)이 29% 빨라짐
  • 메모리 사용량 40% 감소

우리는 다음과 같은 최적화를 통해 이러한 성능 향상을 이루었습니다:

  • 캐싱 또는 느린 작업을 최소화하여 덜 작업하기
  • 파일 시스템 작업 비용을 최적화하기
  • 컴파일 중에 증분 트리 순회를 더 효율적으로 하기
  • 불필요한 차단 동기 호출을 지연 처리하기
  • 대형 아이콘 라이브러리 자동 설정

Next.js 사용자인 Lattice는 테스트 중 컴파일이 87-92% 빨라진다고 보고했습니다.

우리는 현재의 번들러 성능을 지속적으로 개선하면서, 병렬로 Turbopack (베타) 작업도 진행 중입니다. 13.5 버전에서는 next dev --turbo가 더 많은 기능을 지원합니다.

패키지 임포트 최적화

큰 아이콘 라이브러리나 컴포넌트 라이브러리 또는 수백, 수천의 모듈을 재-익스포트하는 다른 의존성을 사용할 때 로컬 개발 성능과 프로덕션에서의 냉동 시작을 개선하기 위해 흥미로운 돌파구를 찾았습니다.

이전에는 modularizeImports 지원을 추가하여 이러한 라이브러리를 사용할 때 어떻게 임포트가 처리되어야 하는지 설정할 수 있었습니다. 13.5에서는 이 옵션을 optimizePackageImports로 대체하여, 더 이상 임포트의 매핑을 지정할 필요가 없지만 대신 자동으로 임포트를 최적화해줍니다.

@mui/icons-material, @mui/material, date-fns, lodash, lodash-es, ramda, react-bootstrap, @headlessui/react, @heroicons/react, lucide-react와 같은 라이브러리는 이제 자동으로 최적화되어, 실제로 사용하는 모듈만 로딩되면서도 여러 명명된 내보내기와 함께 import 문을 작성하는 편리함을 제공합니다.


마치며

함게 읽으면 좋은 글

성능이 최대 300%라고?: PostgreSQL 16 버전 소식
2023년 9월 14일 - PostgreSQL 글로벌 개발 그룹은 오늘 세계에서 가장 고도로 발전한 오픈소스 데이터베이스인 PostgreSQL 16 버전을 공식적으로 발표했습니다. PostgreSQL 16은 쿼리 병렬 처리, 대량 데이터 로딩, 논리 복제 등에서 성능 향상을 이루었습니다. 이번 릴리스에는 개발자와 관리자 모두를 위한 다양한 기능들이 포함되어 있으며, SQL/JSON 문법 확장, 작업부하를 모니터링하기
당신이 IT 종사자라면 옵시디언(Obsidian) 노트 앱을 꼭 써야하는 이유
노트 작성과 정보 관리는 개발자, 학자, 작가, 그리고 일반인들에게 필수적인 작업입니다. 어쩌면 당신은 Evernote, Notion, 또는 기본 메모 앱을 사용하고 있을지 모릅니다. 하지만 오늘은 특별한 노트앱, 옵시디언(Obsidian)에 대해 이야기해보려 합니다. 이 앱이 왜 주목받고 있는지, 그리고 당신이 이를 사용해야 하는 이유에 대해서 깊게 들어가보겠습니다. 옵시디언(Obsidian)의 기본
웹에서 GPU를 쓴다고? WebGPU: WebGPU란?
들어가며 웹의 세계에서 GPU를 이용해야 할 이유가 점점 늘고 있다. 그래픽 처리, 데이터 분석, 심지어는 웹 기반 게임까지, 이러한 다양한 분야에서 GPU의 힘은 무시할 수 없다. 하지만 웹에서 GPU를 이용하는 방법에는 여러가지 제약이 따른다. 이제 그 해결책으로 주목받고 있는 것이 바로 WebGPU입니다. 본 글에서는 WebGPU의 개념부터 실제 사용법, 그리고 WebGL과의