Next.js 13 변경사항 정리(2)
📌 Turbopack
Next.13d은 웹팩의 후속이자 러스트 기반의 터보팩을 탑재하였습니다. (웹팩은 30억회 이상 다운로드 되었습니다. 웹 구축에 필수적인 요수지만, JavaScript 기반 툴링으로 가능한 최대 성능의 한계에 도달하였습니다.)
Next.12에서는 Native Rust-power Tooling 으로 전환하기 시작했습니다. Babel에서 마이그레이션 하는 것으로 시작해서 그 결과 17배 더 빠른 트랜스파일링이 가능해졌습니다. 그런 다음 Terser을 교체하여 6배 더 빠른 minification이 가능해졌습니다.
Next.13 과 함께 터보백을 사용하게 되면
- 웹팩보다 700배 업데이트가 빠릅니다.
- 비트보다 10배 업데이트가 빠릅니다.
- 웹팩보다 4배 cold start가 빠릅니다.
터보팩은 개발에 필요한 최소한의 assest만을 번들링합니다. 그래서 startup 시간이 매우 빠릅니다. 3000개의 모듈을 가진 애플리케이션을 부팅하는데 1.8초가 걸립니다. 비트는 11.4초가 걸리고 웹팩은 16.5초가 걸립니다.
터보팩은 서버컴포넌트, 타입스크립트, jsx, css 등을 즉시 지원합니다.
터보팩 알파 버전은 현재 next build는 지원하지 않습니다. 현재 next dev만 지원합니다.
Next.13에서 Turbpack alpha를 사용하려면 next dev --turbo를 실행하면 됩니다.
📌 next/image
Next.13이 새로운 강력한 이미지 컴포넌트를 소개했습니다. 레이아웃 변경없이 이미지를 쉽게 표시하고, on-demand 방식으로 파일을 최적화하여 성능을 향상시킬 수 있는 강력한 next/image컴포넌트를 제공합니다.
새로운 next images 컴포넌트는 다음과 같습니다.
- 클라이언트 측에 JavaScript가 적게 제공됨
- 스타일링에 유리함
- 기본적으로 alt태그를 내장하여 접근성을 향상시킴
- 웹 플랫폼에 맞게 조절
- hydration이 lazy loading의 필수 요소가 아니어서 빠름
old image 컴포넌트는 next/legacy/image로 변경되었습니다. 아래와 같이 명령어를 치면 기존의 next/image가 next/legacy/image로 업데이트 됩니다.
npx @next/codemod next-image-to-legacy-image ./pages@next/font
Next.13 새로운 폰트 시스템을 도입합니다.
- 커스텀 폰트를 포함하여 폰트를 자동으로 최적화
- 개인 정보 보호 및 성능향상을 위한 외부 네트워크 요청 제거
- 내장된 자동 self-hosting
- CSS의 size-adjust 속성을 자동으로 적용
이 새로운 폰트 시스템을 통해 모든 구글 폰트를 성능 향상과 개인 정보를 염두하며 편리하게 사용할 수 있습니다. CSS 와 폰트 파일은 빌드 시간에 다운로드되고 나머지 정적 assest과 함께 self-hosting 됩니다. 브라우저는 구글로 요청을 전송하지 않습니다.
import { Inter } from 'next/font/google'
// If loading a variable font, you don't need to specify the font weight
const inter = Inter({ subsets: ['latin'] })
export default function MyApp({ Component, pageProps }) {
return (
<main className={inter.className}>
<Component {...pageProps} />
</main>
)
}커스텀 폰트도 자동 self-hosting,캐싱,pre-loading 기능과 함께 제공된다.
next/link
next/link 가 더 이상 child로 태그를 수동적으로 추가할 필요가 없어진다. Next.js 13에서는 Link 는 를 랜더링하여 기본 태그로 props를 전달할 수 있습니다.
import Link from 'next/link'
// Next.js 12: `<a>` has to be nested otherwise it's excluded
<Link href="/about">
<a>About</a>
</Link>
// Next.js 13: `<Link>` always renders `<a>`
<Link href="/about">
About
</Link>