Next.js 컨퍼런스 중 Next 13 발표 자료를 모아놓은 자료입니다.
사견이 상당히 많이 들어가 있으며, 오역이 있을수 있습니다! 홈페이지를 참고해주세요!
TurboPack
처음으로 소개된 것은 Rust 기반의 새로운 번들러인 TurboPack입니다.
Vite 보다 2배 이상 빠르다고 소개를 했으며 사이즈가 큰 경우 10배 이상 빠른 경우도 있다고 합니다.
https://vercel.com/blog/turbopack
벤치마크
새로운 Router System
두번째는 Next.js 12버전 부터 일부 공개했던, 새로운 라우팅 시스템을 소개했습니다.
컨퍼런스 발표 자료에서 강조 한 것은 리액트 서버 컴포넌트를 최대한 이용하여, 부분 렌더링 하는 부분의 비용을 줄이고, 공유 레이아웃 부분도 재렌더링이 일어나지 않도록 하는 것으로 보입니다.
사견으로는 Router system 과 함께 공개된 loading.tsx head.tsx 같은 컴포넌트가 좋아보입니다. 컴포넌트 구조도 전반적으로 바뀔 것 같습니다.
https://beta.nextjs.org/docs/routing/fundamentals
Image, Font Optimizing
Image 컴포넌트를 또 한번 업그레이드 시켰다고 합니다.
로컬 이미지를 사용하는 경우 이미지 파일을 import 형식으로 가져올 경우, width, height 를 자동으로 생성 해주며, blurdataUrl 을 자동으로 생성해주어 lazy loading을 좀 더 자연스럽게 시켜준다고 합니다.
(과연 이제는 Gatsby에 밀리지 않는 이미지 컴포넌트가 될지..)
https://beta.nextjs.org/docs/optimizing/images
공개된 폰트 코드
폰트 관련은 구글 폰트는 해당 방식으로 import 해줄 경우 빌드 시 셀프 호스팅 폰트로 생성 해주는 로직인 것 같습니다. 또한 기존에는 로컬 폰트는 최적화 시키는 작업이 없었는 데 추가된 것을 보면 폰트용량이 비교적 큰 한글에서 유용하게 사용 될 것 같습니다.
