Instalasi

Berdasarkan React / Next.js (App Router)

Perpustakaan ini dapat digunakan di lingkungan React murni dan lingkungan Next.js App Router, dengan entri khusus Next.js mendukung versi 14.2 hingga kurang dari 17.

rxjs (>= 7) dan fast-deep-equal (3.1.3) sudah termasuk sebagai ketergantungan runtime perpustakaan, jadi biasanya tidak perlu diinstal secara terpisah.

Definisi tipe (.d.ts) sudah termasuk dalam paket sehingga dapat langsung digunakan di TypeScript.

Gaya diimpor dari komponen berbasis CSS Modules dan berfungsi tanpa perlu impor CSS global terpisah.

Persyaratan

React >= 18, React DOM >= 18peerDependencies
Next.js >= 14.2 < 17 adalah dependensi peer opsional yang diperlukan saat menggunakan @byeolnaerim/flex-layout/next.

Instal

bash

# npm
npm i @byeolnaerim/flex-layout

# yarn
yarn add @byeolnaerim/flex-layout

# pnpm
pnpm add @byeolnaerim/flex-layout

Next.js URL Split Screen

Untuk menjatuhkan page.tsx ke FlexLayoutSplitScreen di Next.js hanya dengan URL, gunakan @byeolnaerim/flex-layout/next dan /next/generator. Pengaturan ini tidak diperlukan untuk penggunaan FlexLayout biasa.

tsx

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

Catatan Next.js

@byeolnaerim/flex-layoutKomponen utama dari "gunakan klien"dideklarasikan secara internal, sehingga dapat diimpor dan dirender langsung dari Server Component (misalnya: app/layout.tsx).

Jika terjadi kesalahan karena masalah seperti termasuk dalam ruang lingkup sisi server tergantung pada pengaturan lingkungan/build, silakan gunakan salah satu dari yang di bawah ini.

Opsi 1. Buat file pembungkus klien dan ekspor

FlexLayoutClient.tsx

tsx

"use client";

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

Dan di Server Component:

tsx

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

Opsi 2. impor dinamis

tsx

import dynamic from "next/dynamic";

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