Installation

Based on React / Next.js (App Router)

The library can be used in pure React and Next.js App Router environments. The Next.js-specific entry supports Next.js >= 14.2 and < 17.

rxjs (>= 7) and fast-deep-equal (3.1.3) are included as runtime dependencies, so they usually do not need to be installed separately.

Type definitions (.d.ts) are included in the package and can be used directly in TypeScript.

Styles are imported from CSS Modules in components and work without separate global CSS imports.

Requirements

React >= 18, React DOM >= 18peerDependencies
Next.js >= 14.2 < 17 is an optional peer dependency required when using @byeolnaerim/flex-layout/next.

Install

bash

# npm
npm i @byeolnaerim/flex-layout

# yarn
yarn add @byeolnaerim/flex-layout

# pnpm
pnpm add @byeolnaerim/flex-layout

Next.js URL Split Screen

To drop a page.tsx into FlexLayoutSplitScreen from only its URL in Next.js, use @byeolnaerim/flex-layout/next and /next/generator. Regular FlexLayout usage does not require this setup.

tsx

import { FlexLayoutSplitScreenDragBox } from "@byeolnaerim/flex-layout/next";
import { generateFlexLayoutSplitScreenPageRegistry } from "@byeolnaerim/flex-layout/next/generator";

Next.js note

@byeolnaerim/flex-layoutThe main component is internally declared "use client"so it can be imported and rendered directly in a Server Component (e.g. app/layout.tsx).

If errors occur due to issues like being included in server-side scope based on environment/build settings, use one of the options below.

Option 1. Create a client wrapper file and export it

FlexLayoutClient.tsx

tsx

"use client";

export {
  FlexLayout,
  FlexLayoutContainer,
  FlexLayoutSplitScreen,
} from "@byeolnaerim/flex-layout";

And in the Server Component:

tsx

import {
  FlexLayout,
  FlexLayoutContainer,
  FlexLayoutSplitScreen,
} from "@/components/FlexLayoutClient";

Option 2. dynamic import

tsx

import dynamic from "next/dynamic";

const FlexLayout = dynamic(
  () => import("@byeolnaerim/flex-layout").then((m) => m.FlexLayout),
  { ssr: false }
);