# [[Next.js App Router Styling Strategies|Next.js App Router Styling Strategies]]

## 📌 Brief Summary
[[Next.js App Router|Next.js App Router]]의 도입과 React Server Components(RSC)의 사용은 프론트엔드 스타일링 전략에 큰 변화를 가져왔습니다 [1, 2]. 기존의 런타임 기반 CSS-in-JS 라이브러리는 RSC와의 비호환성 문제로 인해 새로운 표준에서 사용이 권장되지 않습니다 [1, 3]. 그 대신 [[Tailwind CSS|Tailwind CSS]], CSS Modules, 그리고 `[[vanilla-extract|vanilla-extract]]`와 같은 제로 런타임(Zero-runtime) 솔루션들이 유지보수성과 성능을 확보할 수 있는 핵심 전략으로 자리 잡았습니다 [3, 4].

## 📖 Core Content
- **React [[Server Components|Server Components]](RSC)와의 호환성 문제**
  [[Next.js|Next.js]] App Router의 서버 컴포넌트는 브라우저가 아닌 서버에서 실행되며 HTML을 스트리밍하는 방식으로 동작합니다 [2]. 따라서 React Context에 의존하여 런타임에 CSS를 생성하고 주입하는 `[[styled-components|styled-components]]`나 `Emotion` 같은 CSS-in-JS 라이브러리는 서버 컴포넌트 환경에서 근본적으로 호환되지 않는 문제가 발생합니다 [1, 2]. 이로 인해 런타임 CSS-in-JS는 App Router 프로젝트에서 성능 병목 현상을 유발할 수 있습니다 [1].

- **App Router에 권장되는 스타일링 솔루션**
  2025년 기준 Next.js App Router를 사용하는 신규 프로젝트에서는 다음과 같은 제로 런타임 방식들이 강력하게 권장됩니다 [3].
  - **Tailwind CSS & CSS Modules**: 중소규모 앱 또는 복잡한 애니메이션/스타일 제어가 필요한 경우 각각 가장 적합한 선택지이며, 런타임 오버헤드 없이 RSC와 100% 호환됩니다 [3, 4].
  - **[[Zero-Runtime CSS-in-JS|Zero-Runtime CSS-in-JS]]**: 다수의 테마를 적용해야 하는 대규모 디자인 시스템에서는 `vanilla-extract`가 좋은 대안입니다 [3]. 이는 TypeScript 기반의 타입 안전성을 제공하면서도 빌드 타임에 정적 CSS를 생성하여 RSC 환경과 완벽히 호환됩니다 [3, 4].

- **유지보수 가능한 확장적(Scalable) 프로젝트 구조 설계**
  App Router를 사용할 때 규모가 커짐에 따라 스타일과 컴포넌트 관리가 어려워지는 것을 막기 위해서는 기능 주도형(Feature-Driven) 아키텍처를 채택해야 합니다 [5]. 
  - `app/` 디렉터리는 라우팅과 레이아웃 처리 목적으로만 최소화하여 유지해야 합니다 [6, 7].
  - 비즈니스 로직과 실제 UI 컴포넌트 디자인은 도메인별로 분류하여 `src/features/` 하위 폴더로 이동시켜 관심사를 분리해야 확장성을 얻을 수 있습니다 [5, 7, 8].
  - 상대 경로가 지저분해지는 것을 방지하기 위해 `tsconfig.json`의 경로 별칭(Path aliases)을 활용해 `@/components/ui/Button` 같은 절대 경로(Absolute Imports)를 사용하는 것이 클린 코드를 유지하는 데 필수적입니다 [9, 10].

## 🔗 Knowledge Connections
- **Related Topics:** [[React Server Components|React Server Components]], Tailwind CSS, CSS Modules, [[Zero-Runtime CSS-in-JS|Zero-runtime CSS-in-JS]], [[Feature-Driven Architecture|Feature-Driven Architecture]]
- **Projects/Contexts:** Next.js Scalable [[Architecture|Architecture]], App Router Migration
- **Contradictions/Notes:** 기존 Next.js Pages Router 환경에서는 `styled-components`나 `Emotion` 기반의 CSS-in-JS가 문제없이 작동하고 마이그레이션할 필요가 없지만, App Router 환경으로 전환할 때에는 구조적 한계로 인해 Tailwind CSS, CSS Modules 또는 `vanilla-extract` 중 하나로 스타일링 방식을 전환할 것을 반드시 계획해야 합니다 [3].

---
*Last updated: 2026-04-26*