Next.js

CSS-in-JS 솔루션

이전 절에서는 CSS 모듈의 클래스 스코핑과 Sass의 변수·중첩 문법으로 Next.js 프로젝트 스타일을 모듈 단위로 관리했습니다. 두 방식은 전역 클래스 충돌을 줄이고 컴포넌트 기반 개발에 맞습니다.

런타임 스타일 주입, SSR 지원, 테마 관리 방식을 비교해 CSS-in-JS 선택 기준을 정리합니다.

1

CSS-in-JS 개념

CSS-in-JS는 JavaScript를 사용하여 컴포넌트의 스타일을 정의하고 관리하는 기술입니다.

CSS-in-JS
2

주요 CSS-in-JS 라이브러리

Emotion, styled-components, Stitches처럼 런타임 스타일 생성 방식과 SSR 설정이 다른 CSS-in-JS 도구를 선택할 수 있습니다.

SSR 설정
3

App Router에서 CSS-in-JS 통합하기

Next.js App Router는 기본적으로 React 서버 컴포넌트를 사용하므로, CSS-in-JS 라이브러리 사용 시 몇 가지 특별한 설정이 필요합니다.

컴포넌트 중심 스타일링