国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

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

Dans votre cas, xterm 嘗試訪問服務(wù)器上不存在的window 對象。解決方案是避免在服務(wù)器上加載 xterm et 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 sur useEffect 內(nèi)使用動態(tài) import()

Remplacez import 移至組件的 useEffect puis 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 Utilisez next/dynamic 與 ssr: false ensemble

Créez un composant et ajoutez-y une logique xterm.

// 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('<path-to>/components/terminal-component'), {
    ssr: false
})

Comme alternative, vous pouvez ajouter une logique directement lorsque vous utilisez des next/dynamic bibliothè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
    }
)