La raison pour laquelle cette erreur se produit est que la bibliothèque nécessite l'API Web pour fonctionner et lorsqueNext.js pré-rend la page côté serveur.

Dans votre cas,xterm尝试访问服务器上不存在的window对象。解决方案是避免在服务器上加载xtermet importez-le dynamiquement pour qu'il ne soit chargé que côté client.

Dans Next.js, il existe plusieurs façons d'y parvenir.

---

#1 suruseEffect内使用动态import()

Remplacezimport移至组件的useEffectpuis importez dynamiquement la bibliothèque et ajoutez-y une logique.

useEffect(() => { const initTerminal = async () => { const { Terminal } = await import('xterm') const term = new Terminal() // Add logic with `term` } initTerminal() }, [])

---

#2 Utiliseznext/dynamic与ssr: falseensemble

Créez un composant et ajoutez-y une logiquexterm.

// components/terminal-component import { Terminal } from 'xterm' function TerminalComponent() { const term = new Terminal() // Add logic around `term` return <> } export default TerminalComponent

Ensuite, importez dynamiquement le composant lorsqu'il est utilisé.

import dynamic from 'next/dynamic' const TerminalComponent = dynamic(() => import('/components/terminal-component'), { ssr: false })

Commealternative, vous pouvez ajouter une logique directement lorsque vous utilisez desnext/dynamicbibliothèques d'importation dynamique pour éviter de générer des fichiers supplémentaires.

import dynamic from 'next/dynamic' const Terminal = dynamic( { loader: () => import('xterm').then((mod) => mod.Terminal), render: (props, Terminal) => { const term = new Terminal() // Add logic with `term` return <> } }, { ssr: false } )