# Intégrer dans Next.js

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

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

- Requested language: `fr-FR`

- Content language: `fr-FR`

- Documentation version: `1.2.0`

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

---

Consultez d’abord [l’installation et les premiers pas](https://docs.univer.ai/fr-FR/guides/sheets/getting-started/installation.md). 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`[^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).

### Étapes d’intégration

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

### 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 { 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 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.