Web SDK

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

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

Динамически загрузите редактор из 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 { UniverLicensePlugin } from '@univerjs-pro/license'import { UniverSlidesPlugin } from '@univerjs-pro/slides'import { UniverSlidesUIPlugin } from '@univerjs-pro/slides-ui'import SlidesUIruRU from '@univerjs-pro/slides-ui/locale/ru-RU'import SlidesruRU from '@univerjs-pro/slides/locale/ru-RU'import { LocaleType, mergeLocales, Univer, UniverInstanceType } from '@univerjs/core'import DesignruRU from '@univerjs/design/locale/ru-RU'import { UniverDocsPlugin } from '@univerjs/docs'import { UniverDocsUIPlugin } from '@univerjs/docs-ui'import DocsUIruRU from '@univerjs/docs-ui/locale/ru-RU'import { UniverDrawingPlugin } from '@univerjs/drawing'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/docs-ui/lib/index.css'import '@univerjs-pro/slides-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,          DocsUIruRU,          SlidesruRU,          SlidesUIruRU,        ),      },    })    univer.registerPlugin(UniverLicensePlugin, {      license: 'YOUR_CLIENT_LICENSE',    })    univer.registerPlugin(UniverRenderEnginePlugin)    univer.registerPlugin(UniverUIPlugin, {      container,    })    univer.registerPlugin(UniverDocsPlugin)    univer.registerPlugin(UniverDocsUIPlugin)    univer.registerPlugin(UniverDrawingPlugin)    univer.registerPlugin(UniverSlidesPlugin)    univer.registerPlugin(UniverSlidesUIPlugin)    univer.createUnit(UniverInstanceType.UNIVER_SLIDE, {})    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.