Web SDK

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

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

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

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

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

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

Пример кода

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

TSX
'use client'import { useEffect, useRef } from 'react'import { UniverBasesPlugin } from '@univerjs-pro/bases'import { UniverBasesUIPlugin } from '@univerjs-pro/bases-ui'import BasesUIruRU from '@univerjs-pro/bases-ui/locale/ru-RU'import BasesruRU from '@univerjs-pro/bases/locale/ru-RU'import { UniverProFormulaEnginePlugin } from '@univerjs-pro/engine-formula'import { UniverLicensePlugin } from '@univerjs-pro/license'import { LocaleType, mergeLocales, Univer, UniverInstanceType } from '@univerjs/core'import DesignruRU from '@univerjs/design/locale/ru-RU'import { UniverRenderEnginePlugin } from '@univerjs/engine-render'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/bases-ui/lib/index.css'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,          BasesruRU,          BasesUIruRU,        ),      },    })    univer.registerPlugin(UniverLicensePlugin, {      license: 'YOUR_CLIENT_LICENSE',    })    univer.registerPlugin(UniverRenderEnginePlugin)    univer.registerPlugin(UniverUIPlugin, { container })    univer.registerPlugin(UniverProFormulaEnginePlugin)    univer.registerPlugin(UniverBasesPlugin)    univer.registerPlugin(UniverBasesUIPlugin)    univer.createUnit(UniverInstanceType.UNIVER_BASE, {})    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 />}

Footnotes

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

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

© 2026 DreamNum Co., Ltd.