安装

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 中通过 URL 将 page.tsx 拖放到 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）中导入后直接渲染。

如果由于环境/构建设置导致包含在服务器端范围内等问题出现错误，请使用以下其中之一。

选项 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 }
);