Next.js 9.2, CSS 지원 강화 및 성능 향상!
by DD
6년 전
조회수 0
CSS import 지원으로 전역 및 컴포넌트 레벨 스타일 적용 편의성 증대
코드 스플리팅 전략 개선으로 번들 사이즈 30~70% 감소 효과
Catch-All Dynamic Routes 지원으로 CMS 기반 웹사이트 구축 용이
CSS Import: 전역 스타일과 모듈 CSS의 공존
Next.js 9.2는 CSS import를 기본 지원하여 전역 스타일과 컴포넌트 레벨 스타일을 모두 사용할 수 있다. 구체적으로, `pages/_app.js`에서 전역 CSS를 import하고, CSS Modules를 통해 컴포넌트별 스타일을 적용한다. 따라서, 스타일 충돌 방지와 코드 관리 효율성을 동시에 확보한다.
코드 스플리팅 개선: 번들 사이즈 감소의 핵심
Next.js 9.2는 코드 스플리팅 전략을 개선하여 번들 사이즈 감소를 이끌었다. HTTP/2를 활용하여 작은 청크(chunk) 단위로 로드하며, 공통 모듈(commons chunk)을 최적화한다. 따라서, 초기 로딩 속도 향상과 클라이언트 측 네비게이션 성능 개선을 달성했다.
