nextjs window is not defined

问题原因,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

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

import React, { useEffect } from 'react';

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

  return (
      ...
  )
}
posted @ 2022-11-17 17:21  小菜菜爱吃菜  阅读(1042)  评论(0编辑  收藏  举报