インストール

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 URLスプリットスクリーン

Next.jsでFlexLayoutSplitScreenにURLだけでpage.tsxをドロップするには、@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";

そしてサーバーコンポーネントでは:

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