4.5 KiB
Next.js 15
📌 Brief Summary
Next.js 15는 React Server Components(RSC)를 핵심으로 하는 App Router를 도입하여 프론트엔드 아키텍처와 렌더링 방식에 패러다임 전환을 가져온 프레임워크입니다 [1]. 서버 컴포넌트와 클라이언트 컴포넌트의 명확한 분리를 통해 자바스크립트 번들 크기를 줄이고 성능을 향상시키는 데 중점을 둡니다 [2-4]. 이러한 복잡한 실행 모델의 도입으로 인해, 프로젝트의 성능을 결정짓는 Styled Components나 Tailwind CSS 같은 스타일링 접근법과 컴포넌트 구조 설계에 대한 재평가가 필수적으로 요구됩니다 [5, 6].
📖 Core Content
-
App Router와 서버 컴포넌트 기반 아키텍처: Next.js 15의 App Router는 컴포넌트가 브라우저로 자바스크립트를 전송하지 않고 서버에서 독점적으로 실행되는 React Server Components(RSC) 모델을 사용합니다 [2]. 상태 관리나 이벤트 핸들러 등 상호작용이 필요한 경우에만 컴포넌트 최상단에
'use client'지시어를 선언하여 클라이언트 컴포넌트 경계를 설정하고, 이 부분에서만 하이드레이션(Hydration)이 발생합니다 [3, 7]. 이를 통해 데이터 페칭을 서버에 안전하게 격리하고 클라이언트 번들을 최적화할 수 있습니다 [2, 4]. -
스타일링 패러다임의 변화와 RSC 비호환성 문제: 기존에 React Context에 의존하여 런타임에 스타일을 주입하던 CSS-in-JS 라이브러리(예: Styled Components, Emotion)는 Context가 존재하지 않는 서버 컴포넌트(RSC) 환경과 근본적으로 호환되지 않습니다 [8, 9]. 이 때문에 Next.js App Router를 사용하는 신규 프로젝트에서는 런타임 오버헤드가 없는 Tailwind CSS나 CSS Modules, 또는 빌드 타임에 정적 CSS를 생성하는 vanilla-extract 같은 제로 런타임 도구를 사용하는 것이 강하게 권장됩니다 [9-11].
-
CSS-in-JS를 위한 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 기반)의 구형 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), Styled Components, 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