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)을 최적화한다. 따라서, 초기 로딩 속도 향상과 클라이언트 측 네비게이션 성능 개선을 달성했다.
Catch-All Dynamic Routes: CMS 연동의 핵심
Next.js 9.2는 Catch-All Dynamic Routes를 지원하여 CMS 기반 웹사이트 구축을 용이하게 한다. 구체적으로, `[...name]` 구문을 사용하여 다양한 URL 구조를 지원한다. 따라서, 유연한 라우팅 설정과 콘텐츠 관리 효율성을 동시에 확보하여 개발 생산성을 향상시켰다.
