Installation

React / Next.js(App Router) 기준

이 라이브러리는 순수 React 환경과 Next.js App Router 환경에서 사용할 수 있으며, Next.js 전용 진입점은 14.2 이상 17 미만을 지원합니다.

rxjs (>= 7) 및 fast-deep-equal (3.1.3)는 라이브러리 런타임 의존성으로 포함되어 있어 보통 따로 설치할 필요가 없습니다.

타입 정의(.d.ts)가 패키지에 포함되어 TypeScript에서 바로 사용할 수 있습니다.

스타일은 CSS Modules 기반으로 컴포넌트에서 import 되며, 별도 글로벌 CSS import 없이 동작합니다.

React >= 18, React DOM >= 18peerDependencies
Next.js >= 14.2 < 17은 @byeolnaerim/flex-layout/next 사용 시 필요한 optional peer dependency입니다.

bash

Next.js에서 FlexLayoutSplitScreen에 URL만으로 page.tsx를 드롭하려면 @byeolnaerim/flex-layout/next와 /next/generator를 사용합니다. 일반 FlexLayout 사용에는 이 설정이 필요하지 않습니다.

tsx

Next.js note

@byeolnaerim/flex-layout의 주요 컴포넌트는 내부적으로 "use client"가 선언되어 있어, Server Component(예: app/layout.tsx)에서 import 후 바로 렌더링해도 동작합니다.

환경/빌드 설정에 따라 server side scope로 포함되는 등의 이슈로 오류가 발생한다면 아래 중 하나를 사용하세요.

tsx

tsx

tsx