Next JS - ReferenceError：文档未定义[重复]答案

【问题标题】：NextJS - ReferrenceError: document is not defined [duplicate]Next JS - ReferenceError：文档未定义[重复]
【发布时间】：2021-11-21 23:28:27
【问题描述】：

我正在运行 NextJS v11.1.12，并尝试运行一个标准的 Vanilla JS 函数，该函数将 div 的 CSS 类与“state-select-dropdown-box”类切换。我的代码是：

const Header = () => {

const dropDownMenu = document.querySelector('state-select-dropdown-box');
console.log(dropDownMenu);

function toggleMenu() {
    dropDownMenu.classList.toggle('show');
}

return ( <Component /> );
}

当应用程序编译时，我得到“参考错误：文档未定义”。奇怪的是，我今天早些时候已经让这些功能运行起来，没有任何问题，也没有改变任何东西。

经过一些大规模的谷歌搜索和研究，我得出的结论是，也许我只是不了解 NextJS 中的 SSR 是如何工作的？谁能解释或阐明为什么我没有达到预期的结果以及如何解决这个问题？

【问题讨论】：

类似的问题。阅读本文以解决问题stackoverflow.com/a/67846207/9496122

标签： javascript reactjs next.js

【解决方案1】：

@Surjeet Bhadauriya 的回答在技术上是正确的，但是 next.js 提供了动态加载组件的内置功能，实际上使用 next/dynamic 您可以在没有SSR 的情况下加载组件。
来自文档：

您可能并不总是希望在服务器端包含模块。为了例如，当模块包含一个仅在浏览器。

const Header = () => {

const dropDownMenu = document.querySelector('state-select-dropdown-box');
console.log(dropDownMenu);

function toggleMenu() {
    dropDownMenu.classList.toggle('show');
}

return ( <Component /> );
}
export default Header

然后在您的页面中（或您导入的任何地方）：

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/Header'),
  { ssr: false } // <-- not including this component on server-side
)

【讨论】：

【解决方案2】：

您收到此错误是因为document 对象在服务器上不可用。同样，如果您尝试使用window, localStorage，那么它也会抛出错误。这些仅在客户端（浏览器）上可用。

NextJs 从服务器提供您的页面。因此，在您的情况下，它试图在服务器上获取document，但document 对象在服务器上不可用。因此你得到了错误。

要摆脱这个错误：

您需要指定此类代码应该在浏览器端而不是在服务器端运行。

为此，您可以使用process.browser

所以你的代码应该是这样的：

const dropDownMenu = process.browser && document.querySelector('state-select-dropdown-box');

【讨论】：