Next.js URL Split Screen

v1.0.0

Di Next.js App Router, cukup tentukan URL untuk merender page.tsx di server dan seret ke pane baru dari FlexLayoutSplitScreen.

Alur kerja

FlexLayout biasa bertanggung jawab atas tata letak dan pengubahan ukuran seperti biasa, sementara pembagian dinamis ditangani oleh FlexLayoutSplitScreen. Titik masuk khusus Next.js menginterpretasikan url dari DragBox sebagai registry yang dihasilkan, merender page.tsx di server, dan kemudian mengirimkan hasilnya ke pane split yang sesuai.

text

1. Buat Registry

Hanya mengatur jalur aplikasi dan jalur output di bagian atas skrip proyek yang digunakan. Hasil yang dihasilkan adalah registri import statis yang dapat menginterpretasikan grup rute dan segmen dinamis, dan ekspor default adalah FlexLayoutNextSplitScreen.

scripts/generateFlexLayoutSplitScreenPageRegistry.mjs

2. Menerapkan FlexLayoutNextSplitScreen

FlexLayoutNextSplitScreen adalah wrapper khusus untuk Next.js yang menyediakan rendering server untuk panel URL menggunakan registri halaman yang dihasilkan. Cukup membungkus pohon FlexLayoutSplitScreen yang akan menerima panel berbasis URL.

tsx

3. Memulihkan penyegaran panel URL

Target pemulihan hanya panel URL Next yang dapat dibuat kembali.

Termasuk dalam snapshot persisten hanya panel yang dibungkus dengan FlexLayoutNextSplitScreen, memiliki DragBox khusus untuk Next.js yang menggunakan metode url, dan tidak secara langsung menentukan targetComponent serta tidak menggunakan iframe. Metode targetComponent tidak menghalangi rendering biasa tetapi dikecualikan dari target pemulihan penyegaran.

Jika persistence ditentukan, hanya metadata yang dapat diserialisasi seperti URL, screenKey, containerName, navigationTitle, yang akan disimpan di storage, bukan ReactElement itu sendiri. Jika restoreOnReload adalah false, persistence tidak digunakan, dan jika syncWithBrowserUrl adalah true, snapshot berdasarkan pathname + search URL akan disimpan. Saat kembali/maju atau mengunjungi kembali URL yang sama, status split berdasarkan URL tersebut akan dipulihkan, dan saat refresh, snapshot URL saat ini juga akan dipulihkan.

tsx

4. Hanya URL yang diteruskan ke DragBox

DragBox khusus Next.js hanya menerima URL tanpa perlu membuat targetComponent secara langsung. Jika targetComponent ditentukan, metode lama akan diutamakan dan pane tersebut akan dikecualikan dari target persistence.

tsx

5. iframe adalah opsional

Nilai default iframe adalah false. Hanya tentukan iframe sebagai true jika diperlukan URL eksternal atau konteks dokumen independen. Mode iframe tidak memerlukan registri halaman FlexLayoutNextSplitScreen dan juga dikecualikan dari target persistence.

tsx

Pembatasan konteks router

Di server page, params dan searchParams yang diekstrak dari URL akan diteruskan. Namun, split pane bukanlah Next Router terpisah, sehingga usePathname, useParams, dan useSearchParams dari Client Component internal berfungsi berdasarkan URL aktual di browser.