# Integrar en Next.js

- Human documentation: [https://docs.univer.ai/es-ES/guides/docs/getting-started/integrations/nextjs](https://docs.univer.ai/es-ES/guides/docs/getting-started/integrations/nextjs)

- Agent Markdown: [https://docs.univer.ai/es-ES/guides/docs/getting-started/integrations/nextjs.md](https://docs.univer.ai/es-ES/guides/docs/getting-started/integrations/nextjs.md)

- Requested language: `es-ES`

- Content language: `es-ES`

- Documentation version: `1.2.0`

- Source: [docs/getting-started/integrations/nextjs.es-ES.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/docs/getting-started/integrations/nextjs.es-ES.mdx)

---

Consulta primero la [instalación y el uso básico](https://docs.univer.ai/es-ES/guides/docs/getting-started/installation.md). Este ejemplo usa Next.js App Router para montar Univer Docs en un contenedor con una altura explícita.

Carga el editor desde un Client Component con `ssr: false`[^ssr]. La directiva `use client` por sí sola no desactiva el prerenderizado. [Next.js](https://nextjs.org/docs/app/guides/lazy-loading#skipping-ssr).

### Pasos de integración

1. Inicializar Univer en el gancho `useEffect`
2. Destruir Univer en la función de retorno del gancho `useEffect`

### 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 title="univer-editor.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 title="page.tsx"
'use client'

import dynamic from 'next/dynamic'

const UniverEditor = dynamic(() => import('./univer-editor'), { ssr: false })

export default function Page() {
  return <UniverEditor />
}
```

[^ssr]: 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.