Integrate in Next.js
Start with installation and basic usage. This example uses Next.js App Router to mount Univer Docs in a container with an explicit height.
Load the editor from a Client Component with ssr: false1. A use client directive alone does not disable prerendering. Next.js.
Integration Steps
- Initialize Univer in the
useEffecthook - Destroy Univer in the return function of the
useEffecthook
Example
Each mount uses its own child container. Disposal runs in a microtask after the surrounding React cleanup, so nested React roots are not unmounted synchronously during a React commit.
TSX
'use client'import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import { useEffect, useRef } from 'react'import '@univerjs/preset-docs-core/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, univerAPI } = createUniver({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( UniverPresetDocsCoreEnUS, ), }, presets: [ UniverDocsCorePreset({ container, }), ], }) univerAPI.createDocument({}) 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
-
Server-side rendering (SSR) runs rendering code before the browser loads the page. Browser-only APIs such as
windowand the DOM are unavailable there; a Client Component may still be prerendered unless SSR is disabled for that editor component. ↩
How is this guide?