如何修复 Next.js 中的'窗口未定义”错误？

Next.js React App 中未定义窗口：综合解决方案

在 Next.js 应用程序中，您可能会遇到错误“尝试访问全局“窗口”对象时，“窗口未定义”。发生这种情况是因为窗口对象仅在客户端呈现期间可用。以下是解决此问题的方法：

要使用“window”对象，您可以用“if”语句包围代码，检查“window”是否已定义：

if (typeof window !== "undefined") {
  // Client-side-only code
  console.log('window.innerHeight', window.innerHeight);
}

这种方法确保“if”块中的代码仅在客户端执行，其中“window”对象是可访问。

不再建议使用通过“process.browser”访问“window”的建议，因为它已在 Webpack5 和 Next.js 中弃用。 “process”对象主要用于服务器端渲染，将其用于客户端操作是不合适的。

因此，推荐的解决方案是在之前检查“window”对象是否存在访问它。这可确保您的代码在客户端和服务器端渲染环境之间可移植。

以上是如何修复 Next.js 中的'窗口未定义”错误？的详细内容。更多信息请关注PHP中文网其他相关文章！