การติดตั้ง

ตามมาตรฐาน 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 เป็น peer dependency ที่จำเป็นเมื่อใช้ @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 บนเซิร์ฟเวอร์และวางลงใน pane ใหม่ของ FlexLayoutSplitScreen

ในการวาง page.tsx ลงใน FlexLayoutSplitScreen โดยใช้ URL ใน Next.js ให้ใช้ @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คอมโพเนนต์หลักของจะถูกประกาศภายใน "ใช้ลูกค้า"ซึ่งทำให้สามารถนำเข้าและเรนเดอร์ได้ทันทีใน Server Component (เช่น: app/layout.tsx) หลังจากนำเข้า.

หากเกิดข้อผิดพลาดเนื่องจากปัญหาที่เกี่ยวข้องกับขอบเขตฝั่งเซิร์ฟเวอร์ตามการตั้งค่าของสภาพแวดล้อม/การสร้าง ให้ใช้หนึ่งในตัวเลือกด้านล่าง.

ตัวเลือก 1. สร้างไฟล์ Client wrapper และส่งออก

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