# Intégrer dans Next.js

- Human documentation: [https://docs.univer.ai/fr-FR/guides/boards/getting-started/integrations/nextjs](https://docs.univer.ai/fr-FR/guides/boards/getting-started/integrations/nextjs)

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

- Requested language: `fr-FR`

- Content language: `fr-FR`

- Documentation version: `1.2.0`

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

---

Consultez d’abord [l’installation et les premiers pas](https://docs.univer.ai/fr-FR/guides/boards/getting-started/installation.md). Cet exemple utilise Next.js App Router pour monter Univer Boards dans un conteneur avec une hauteur explicite.

Chargez l’éditeur depuis un Client Component avec `ssr: false`[^ssr]. La directive `use client` seule ne désactive pas le prérendu. [Next.js](https://nextjs.org/docs/app/guides/lazy-loading#skipping-ssr).

Remplacez `YOUR_CLIENT_LICENSE` par le contenu de la licence client, pas par un chemin de fichier. [Configuration de la licence](https://docs.univer.ai/fr-FR/server/license.md).

### Étapes d’intégration

1. Initialisez Univer dans `useEffect`.
2. Libérez Univer dans `useEffect cleanup`.

### Exemple de code

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

import { useEffect, useRef } from 'react'
import { UniverBoardsPlugin } from '@univerjs-pro/boards'
import { UniverBoardsUIPlugin } from '@univerjs-pro/boards-ui'
import BoardsUIfrFR from '@univerjs-pro/boards-ui/locale/fr-FR'
import { UniverInkUIPlugin } from '@univerjs-pro/ink-ui'
import InkUIfrFR from '@univerjs-pro/ink-ui/locale/fr-FR'
import { UniverLicensePlugin } from '@univerjs-pro/license'
import { LocaleType, mergeLocales, Univer, UniverInstanceType } from '@univerjs/core'
import DesignfrFR from '@univerjs/design/locale/fr-FR'
import { UniverDocsPlugin } from '@univerjs/docs'
import { UniverDocsUIPlugin } from '@univerjs/docs-ui'
import DocsUIfrFR from '@univerjs/docs-ui/locale/fr-FR'
import { UniverDrawingPlugin } from '@univerjs/drawing'
import { UniverDrawingUIPlugin } from '@univerjs/drawing-ui'
import DrawingUIfrFR from '@univerjs/drawing-ui/locale/fr-FR'
import { UniverRenderEnginePlugin } from '@univerjs/engine-render'
import { UniverUIPlugin } from '@univerjs/ui'
import UIfrFR from '@univerjs/ui/locale/fr-FR'

import '@univerjs/design/lib/index.css'
import '@univerjs/ui/lib/index.css'
import '@univerjs/docs-ui/lib/index.css'
import '@univerjs/drawing-ui/lib/index.css'
import '@univerjs-pro/ink-ui/lib/index.css'
import '@univerjs-pro/boards-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.FR_FR,
      locales: {
        [LocaleType.FR_FR]: mergeLocales(
          DesignfrFR,
          UIfrFR,
          DocsUIfrFR,
          DrawingUIfrFR,
          InkUIfrFR,
          BoardsUIfrFR,
        ),
      },
    })

    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(UniverDrawingUIPlugin)
    univer.registerPlugin(UniverInkUIPlugin)
    univer.registerPlugin(UniverBoardsPlugin)
    univer.registerPlugin(UniverBoardsUIPlugin)

    univer.createUnit(UniverInstanceType.UNIVER_BOARD, {})

    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]: 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.