安裝

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 從組件中導入，無需單獨的全局 CSS 導入即可運行。

需求

React >= 18, React DOM >= 18peerDependencies
Next.js >= 14.2 < 17 是使用 @byeolnaerim/flex-layout/next 時所需的可選對等依賴。

安裝

bash

# npm
npm i @byeolnaerim/flex-layout

# yarn
yarn add @byeolnaerim/flex-layout

# pnpm
pnpm add @byeolnaerim/flex-layout

在 Next.js App Router 中，只需指定 URL 即可在服務器上渲染該 page.tsx，並將其放入 FlexLayoutSplitScreen 的新窗格中。

要在 Next.js 中將 page.tsx 僅透過 URL 拖放到 FlexLayoutSplitScreen，請使用 @byeolnaerim/flex-layout/next 和 /next/generator。一般使用 FlexLayout 不需要此設定。

tsx

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

Next.js 注意事項

@byeolnaerim/flex-layout主要組件在內部已宣告 "use client"，因此在 Server Component（例如： app/layout.tsx）中導入後可以直接渲染。

如果因環境/構建設置而導致包含在 server side scope 中的問題，請使用以下其中一種。

選項 1. 創建客戶端包裝文件並導出

FlexLayoutClient.tsx

tsx

"use client";

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

然後在 Server Component 中使用：

tsx

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

選項 2. 動態導入

tsx

import dynamic from "next/dynamic";

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