インストール
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 >= 18
peerDependencies - Next.js >= 14.2 < 17は@byeolnaerim/flex-layout/next使用時に必要なオプショナルピア依存関係です。
インストール
bash
Next.js URLスプリットスクリーン
Next.jsでFlexLayoutSplitScreenにURLだけでpage.tsxをドロップするには、@byeolnaerim/flex-layout/nextと/next/generatorを使用します。一般的なFlexLayoutの使用にはこの設定は必要ありません。
tsx
Next.js ノート
@byeolnaerim/flex-layoutの主要コンポーネントは内部的に "use client"が宣言されているため、Server Component (例: app/layout.tsx) からインポート後すぐにレンダリングしても動作します。環境/ビルド設定によりサーバーサイドスコープに含まれるなどの問題でエラーが発生する場合は、以下のいずれかを使用してください。
オプション 1. クライアントラッパーファイルを作成してエクスポート
FlexLayoutClient.tsx
tsxそしてサーバーコンポーネントでは:
tsx
オプション 2. ダイナミックインポート
tsx