Intégrer dans Next.js

Consultez d’abord l’installation et les premiers pas. Cet exemple utilise Next.js App Router pour monter Univer Sheets dans un conteneur avec une hauteur explicite.

Chargez l’éditeur depuis un Client Component avec ssr: false¹. La directive use client seule ne désactive pas le prérendu. Next.js.

Étapes d’intégration

Initialisez Univer dans le hook useEffect
Détruisez Univer dans la fonction de nettoyage renvoyée par le hook useEffect

Chaque montage utilise son propre conteneur enfant. La destruction est différée dans une microtâche après le nettoyage React parent, afin de ne pas démonter une racine React imbriquée pendant un commit.

TSX

'use client'import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import { useEffect, useRef } from 'react'import '@univerjs/preset-sheets-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(          UniverPresetSheetsCoreEnUS,        ),      },      presets: [        UniverSheetsCorePreset({          container,        }),      ],    })    univerAPI.createWorkbook({})    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 />}

Le rendu côté serveur (SSR) exécute le code de rendu avant le chargement de la page dans le navigateur, sans window ni DOM. Un Client Component peut aussi être prérendu : il faut désactiver le SSR pour le composant de l’éditeur. ↩

Que pensez-vous de ce guide ?

Étapes d’intégration

Exemple de code

Footnotes