Web SDK

Integrar en Next.js

Consulta primero la instalación y el uso básico. Este ejemplo usa Next.js App Router para montar Univer Bases en un contenedor con una altura explícita.

Carga el editor desde un Client Component con ssr: false1. La directiva use client por sí sola no desactiva el prerenderizado. Next.js.

Sustituye YOUR_CLIENT_LICENSE por el contenido de la licencia cliente, no por una ruta de archivo. Configuración de licencia.

Pasos de integración

  1. Inicializa Univer en useEffect.
  2. Libera Univer en useEffect cleanup.

Código de ejemplo

Cada montaje usa su propio contenedor hijo. La destrucción se ejecuta en una microtarea tras la limpieza de React para evitar desmontar una raíz React anidada durante un commit.

TSX
'use client'import { useEffect, useRef } from 'react'import { UniverBasesPlugin } from '@univerjs-pro/bases'import { UniverBasesUIPlugin } from '@univerjs-pro/bases-ui'import BasesUIesES from '@univerjs-pro/bases-ui/locale/es-ES'import BasesesES from '@univerjs-pro/bases/locale/es-ES'import { UniverProFormulaEnginePlugin } from '@univerjs-pro/engine-formula'import { UniverLicensePlugin } from '@univerjs-pro/license'import { LocaleType, mergeLocales, Univer, UniverInstanceType } from '@univerjs/core'import DesignesES from '@univerjs/design/locale/es-ES'import { UniverRenderEnginePlugin } from '@univerjs/engine-render'import { UniverUIPlugin } from '@univerjs/ui'import UIesES from '@univerjs/ui/locale/es-ES'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.ES_ES,      locales: {        [LocaleType.ES_ES]: mergeLocales(          DesignesES,          UIesES,          BasesesES,          BasesUIesES,        ),      },    })    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. El renderizado del lado del servidor (SSR) ejecuta el código de renderizado antes de cargar la página en el navegador, sin window ni DOM. Un Client Component también puede prerenderizarse, por lo que debe desactivar el SSR del componente del editor. ↩

¿Cómo es esta guía?

© 2026 DreamNum Co., Ltd.