# [[Next.js 15|Next.js 15]]

## 📌 Brief Summary
[[Next.js|Next.js]] 15는 React Server Components(RSC)를 핵심으로 하는 App Router를 도입하여 프론트엔드 아키텍처와 렌더링 방식에 패러다임 전환을 가져온 프레임워크입니다 [1]. 서버 컴포넌트와 클라이언트 컴포넌트의 명확한 분리를 통해 자바스크립트 번들 크기를 줄이고 성능을 향상시키는 데 중점을 둡니다 [2-4]. 이러한 복잡한 실행 모델의 도입으로 인해, 프로젝트의 성능을 결정짓는 Styled Components나 [[Tailwind CSS|Tailwind CSS]] 같은 스타일링 접근법과 컴포넌트 구조 설계에 대한 재평가가 필수적으로 요구됩니다 [5, 6].

## 📖 Core Content
* **App Router와 서버 컴포넌트 기반 아키텍처:**
  Next.js 15의 App Router는 컴포넌트가 브라우저로 자바스크립트를 전송하지 않고 서버에서 독점적으로 실행되는 React [[Server Components|Server Components]](RSC) 모델을 사용합니다 [2]. 상태 관리나 이벤트 핸들러 등 상호작용이 필요한 경우에만 컴포넌트 최상단에 `'use client'` 지시어를 선언하여 클라이언트 컴포넌트 경계를 설정하고, 이 부분에서만 하이드레이션([[Hydration|Hydration]])이 발생합니다 [3, 7]. 이를 통해 데이터 페칭을 서버에 안전하게 격리하고 클라이언트 번들을 최적화할 수 있습니다 [2, 4].

* **스타일링 패러다임의 변화와 RSC 비호환성 문제:**
  기존에 [[React Context|React Context]]에 의존하여 런타임에 스타일을 주입하던 CSS-in-JS 라이브러리(예: Styled Components, Emotion)는 Context가 존재하지 않는 서버 컴포넌트(RSC) 환경과 근본적으로 호환되지 않습니다 [8, 9]. 이 때문에 Next.js App Router를 사용하는 신규 프로젝트에서는 런타임 오버헤드가 없는 Tailwind CSS나 [[CSS Modules|CSS Modules]], 또는 빌드 타임에 정적 CSS를 생성하는 [[vanilla-extract|vanilla-extract]] 같은 제로 런타임 도구를 사용하는 것이 강하게 권장됩니다 [9-11]. 

* **CSS-in-JS를 위한 [[Style Registry|Style Registry]] 통합 패턴:**
  Next.js 15의 App Router에서 Styled Components를 반드시 사용해야 할 경우, 3단계 옵트인(opt-in) 프로세스가 필요합니다 [6]. 렌더링 중 CSS 규칙을 수집하는 'Style Registry'를 만들고, `useServerInsertedHTML` 훅을 사용해 HTML 헤드에 해당 규칙을 주입한 뒤, 애플리케이션을 이 레지스트리를 제공하는 클라이언트 컴포넌트로 감싸야 합니다 [6]. 또한 서버와 클라이언트에서 서로 다른 클래스 이름이 생성되어 발생하는 하이드레이션 불일치(Hydration Mismatch)를 방지하기 위해 `next.config.js` 파일에서 `styledComponents` 컴파일러 옵션을 활성화해야 합니다 [12].

* **Pages Router 환경에서의 스타일링 제약 업데이트:**
  Next.js 15([[React 18|React 18]] 기반)의 구형 Pages Router를 사용할 때도 변화가 있습니다. `_document.tsx`의 `Document.getInitialProps` 내 `styles` 필드에서 스타일이 포함된 JSX 코드 조각(Fragment)을 반환하는 것이 더 이상 지원되지 않습니다 [13, 14]. 이를 해결하려면 `React.Children.toArray`를 사용하여 `styles` 필드가 유효한 React 노드의 평면 배열(flat array)을 반환하도록 구성해야 합니다 [15].

* **다양한 데이터 페칭 및 렌더링 전략 지원:**
  기본적으로 정적 렌더링(Static Rendering)을 통해 빌드 타임에 HTML을 생성하며, `cookies()`나 `headers()` 같은 함수를 사용할 경우 동적 렌더링(Dynamic Rendering)으로 전환됩니다 [16]. 그 외에도 일정 시간 후 페이지를 다시 생성하는 점진적 정적 재생성(ISR), 특정 태그 기반의 주문형 재검증(On-Demand Revalidation) 기능을 통해 유연하고 확장 가능한 프론트엔드를 구축할 수 있습니다 [4, 16].

## 🔗 Knowledge Connections
- **Related Topics:** [[React Server Components (RSC)|React Server Components (RSC]], Styled Components, [[Tailwind CSS|Tailwind CSS]], App Router
- **Projects/Contexts:** Next.js App Router 환경에서의 확장 가능한 프론트엔드 스타일링 및 UI 컴포넌트 아키텍처 설계
- **Contradictions/Notes:** 소스에 따르면 Next.js App Router를 도입하는 신규 프로젝트에서는 성능 이슈와 RSC 호환성 문제로 런타임 CSS-in-JS 사용을 피하는 것이 최우선으로 권장되지만 [11], 동시에 하위 호환성이나 기존 설정을 유지해야 하는 팀을 위해 Style Registry 패턴을 통해 Styled Components를 통합할 수 있는 공식적인 우회 방법론도 함께 제공하고 있습니다 [6].

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