Next.js는 어떤 스타일링 옵션을 지원하나요?

Question

Accepted Answer

Next.js는 사실상 모든 CSS 접근 방식을 내장 처리와 함께 지원합니다. 프로젝트에 맞는 것을 고를 수 있습니다. ## 글로벌 CSS ```tsx // app/layout.tsx — 루트에서 한 번 import하는 글로벌 스타일 import "./globals.css"; ``` ## CSS Modules (기본적으로 스코프됨) ```tsx // Button.module.css → 클래스 이름이 로컬에서 해시 처리됨 (충돌 없음) import styles from "./Button.module.css"; export default () => ; // "Button_primary__a1b2" 같은 클래스로 렌더링됨 — 이 컴포넌트에만 스코프됨 ``` `.module.css` 컨벤션은 클래스 이름을 자동으로 스코프하므로 한 파일의 `.primary`가 다른 파일의 `.primary`와 절대 충돌하지 않습니다. 런타임 없이 CSS의 전역 스코프 문제를 해결합니다. ## Tailwind CSS (매우 흔함) ```tsx export default () => ; ``` 유틸리티 우선 방식이며, Next.js는 일급 설정 지원을 제공합니다. 속도와 일관성으로 인기가 높고, 사용되지 않는 스타일을 자동으로 제거(purge)합니다. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion 등 ``` 동작하지만 주의할 점: 대부분의 CSS-in-JS 라이브러리는 **Client Component 전용**이며 Server Components에서는 추가 설정이 필요합니다. 더 새로운 제로 런타임 옵션(vanilla-extract, Tailwind)이 App Router의 서버 우선 모델에 더 잘 맞습니다. ## Sass ```bash npm install sass # 이후 .scss 파일 import — 내장 지원, 설정 불필요 ``` ## 선택 기준 ```text Tailwind → 빠르고 일관적이며 서버 친화적 (인기 있는 기본 선택) CSS Modules → 스코프됨, 순수 CSS, 런타임 없음, Server Components와 잘 맞음 CSS-in-JS → 동적 스타일, 그러나 클라이언트 전용 + App Router에서 설정 추가 필요 글로벌 CSS/Sass → 리셋, 베이스 스타일, 디자인 토큰 ``` ## 왜 중요한가 Next.js는 스타일링 방식을 강요하지 않습니다. 글로벌 CSS, 스코프된 CSS Modules, Tailwind, Sass, CSS-in-JS를 내장 도구와 함께 지원합니다. 트레이드오프(특히 App Router에서 CSS-in-JS는 클라이언트 전용인 반면 Tailwind/CSS Modules는 Server Components와 잘 어울린다는 점)를 아는 것이 렌더링 모델에 맞는 접근 방식을 고르는 데 도움이 됩니다.