发生错误的原因是该库需要 Web API 才能工作,而在以下情况下这些 API 不可用Next.js 预渲染页面在服务器端。
就你而言,xterm
尝试访问window
服务器上不存在的对象。解决方案是避免加载xterm
在服务器上并动态导入它,以便它仅在客户端加载。
在 Next.js 中,有多种方法可以实现此目的。
#1 使用动态import()
inside useEffect
移动import
到你的组件的useEffect
,然后动态导入库并在其中添加您的逻辑。
useEffect(() => {
const initTerminal = async () => {
const { Terminal } = await import('xterm')
const term = new Terminal()
// Add logic with `term`
}
initTerminal()
}, [])
#2 使用next/dynamic
with ssr: false
创建一个组件,在其中添加xterm
logic.
// components/terminal-component
import { Terminal } from 'xterm'
function TerminalComponent() {
const term = new Terminal()
// Add logic around `term`
return <></>
}
export default TerminalComponent
然后在使用时动态导入该组件。
import dynamic from 'next/dynamic'
const TerminalComponent = dynamic(() => import('<path-to>/components/terminal-component'), {
ssr: false
})
As an 选择,您可以在动态导入库时直接添加逻辑next/dynamic
以避免有额外的文件。
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
}
)