Интеграция с Next.js

Сначала прочитайте установку и базовую настройку. В этом примере Next.js App Router монтирует Univer Pdfs в контейнер с явно заданной высотой.

Динамически загрузите редактор из Client Component с ssr: false¹. Директива use client сама по себе не отключает предварительный рендеринг. Next.js.

Замените YOUR_CLIENT_LICENSE содержимым клиентской лицензии, а не путём к файлу. Настройка лицензии.

Шаги интеграции

Инициализируйте Univer в useEffect.
Освободите Univer в useEffect cleanup.

Каждое монтирование использует отдельный дочерний контейнер. Освобождение выполняется в микрозадаче после очистки внешнего React, чтобы не размонтировать вложенный React root синхронно во время commit.

TSX

'use client'import { useEffect, useRef } from 'react'import { UniverLicensePlugin } from '@univerjs-pro/license'import { UniverPdfsPlugin } from '@univerjs-pro/pdfs'import { UniverPdfsUIPlugin } from '@univerjs-pro/pdfs-ui'import PdfsUIruRU from '@univerjs-pro/pdfs-ui/locale/ru-RU'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { FUniver } from '@univerjs/core/facade'import DesignruRU from '@univerjs/design/locale/ru-RU'import { UniverUIPlugin } from '@univerjs/ui'import UIruRU from '@univerjs/ui/locale/ru-RU'import '@univerjs/design/lib/index.css'import '@univerjs/ui/lib/index.css'import '@univerjs-pro/pdfs-ui/lib/index.css'import '@univerjs-pro/pdfs/facade'export default function UniverEditor() {  const containerRef = useRef<HTMLDivElement>(null)  useEffect(() => {    const host = containerRef.current    if (!host) return    const container = document.createElement('div')    container.style.height = '100%'    host.append(container)    const univer = new Univer({      locale: LocaleType.RU_RU,      locales: {        [LocaleType.RU_RU]: mergeLocales(          DesignruRU,          UIruRU,          PdfsUIruRU,        ),      },    })    univer.registerPlugin(UniverLicensePlugin, {      license: 'YOUR_CLIENT_LICENSE',    })    univer.registerPlugin(UniverUIPlugin, { container })    univer.registerPlugin(UniverPdfsPlugin)    univer.registerPlugin(UniverPdfsUIPlugin)    const univerAPI = FUniver.newAPI(univer)    univerAPI.createPdf({ name: 'Untitled PDF' })    return () => {      queueMicrotask(() => {        univer.dispose()        container.remove()      })    }  }, [])  return <div ref={containerRef} style={{ height: 600 }} />}

TSX

'use client'import dynamic from 'next/dynamic'const UniverEditor = dynamic(() => import('./univer-editor'), { ssr: false })export default function Page() {  return <UniverEditor />}

Серверный рендеринг (SSR) выполняет код отрисовки до загрузки страницы браузером, без window и DOM. Client Component также может предварительно отрисовываться, поэтому SSR редактора отключается отдельно. ↩

Насколько полезно это руководство?

Шаги интеграции

Пример кода

Footnotes