nextjs window is not defined

2022-11-17 281 阅读1分钟

问题原因，nextjs是服务端渲染的，在服务器预渲染HTML，然后发送到客户端进行渲染。因此在服务端渲染时，是获取不到浏览器对象window/document等

dynamic 动态导入组件

home.js

export default Home () {
  console.log(window);

  return (
      ...
  )
}

app.js

import dynamic from 'next/dynamic';

const HomePage = dynamic(import('./home'), { ssr: false });

export default App () {
  return <HomePage />
}

因为useEffect方法在服务端渲染过程中不会执行，而是在HTML挂载到客户端后才执行，因此可以在useEffect中直接使用window

import React, { useEffect } from 'react';

export default Home () {
  useEffect((
    console.log(window)
  ), [])

  return (
      ...
  )
}