Cài đặt

Tiêu chuẩn React / Next.js (App Router)

Thư viện này có thể sử dụng trong môi trường React thuần và môi trường Next.js App Router, điểm vào riêng cho Next.js hỗ trợ từ 14.2 đến dưới 17.

rxjs (>= 7) và fast-deep-equal (3.1.3) được bao gồm như là phụ thuộc runtime của thư viện, vì vậy thường không cần cài đặt riêng.

Định nghĩa kiểu (.d.ts) được bao gồm trong gói, có thể sử dụng ngay trong TypeScript.

Các kiểu được import từ các component dựa trên CSS Modules và hoạt động mà không cần import CSS toàn cầu riêng.

Yêu cầu

React >= 18, React DOM >= 18peerDependencies
Next.js >= 14.2 < 17 là dependency peer tùy chọn cần thiết khi sử dụng @byeolnaerim/flex-layout/next.

Cài đặt

bash

# npm
npm i @byeolnaerim/flex-layout

# yarn
yarn add @byeolnaerim/flex-layout

# pnpm
pnpm add @byeolnaerim/flex-layout

Trong Next.js App Router, chỉ cần chỉ định URL để render page.tsx trên máy chủ và thả vào pane mới của FlexLayoutSplitScreen.

Để thả page.tsx vào FlexLayoutSplitScreen chỉ bằng URL trong Next.js, hãy sử dụng @byeolnaerim/flex-layout/next và /next/generator. Cài đặt này không cần thiết cho việc sử dụng FlexLayout thông thường.

tsx

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

Ghi chú Next.js

@byeolnaerim/flex-layoutCác component chính được khai báo nội bộ "use client"và có thể được import và render ngay trong Server Component (ví dụ: app/layout.tsx).

Nếu có lỗi xảy ra do các vấn đề như được bao gồm trong phạm vi server side tùy thuộc vào cấu hình môi trường/xây dựng, hãy sử dụng một trong các tùy chọn dưới đây.

Tùy chọn 1. Tạo file wrapper client và export

FlexLayoutClient.tsx

tsx

"use client";

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

Và trong Server Component:

tsx

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

Tùy chọn 2. import động

tsx

import dynamic from "next/dynamic";

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