在 Next.js 中，我们经常会遇到 window is not defined 的错误。这是因为 Next.js 是一个服务器渲染框架，它会在服务器端渲染页面并返回给客户端，而在服务器端执行的 JavaScript 代码无法访问浏览器的 DOM 和 BOM 对象，包括 window 对象。因此，如果我们在 Next.js 中使用了浏览器端的 JavaScript 代码，就会出现 window is not defined 错误。
下面我们将介绍几种解决 window is not defined 错误的方法。
1. 使用 typeof 判断 window 是否存在
我们可以使用 typeof 判断 window 是否存在，如果存在再执行相关代码。例如：
-- ------- ------ --- ------------ - -- -------- -
这样可以避免在服务器端执行浏览器端代码时出现错误。
2. 使用 dynamic import 按需加载组件
如果我们在 Next.js 中使用了某些依赖于浏览器环境的组件（如 react-leaflet），我们可以使用 dynamic import 按需加载组件，并在客户端渲染时执行相关代码。例如：
------ ------- ---- ---------------
----- ----- - ---------- -- ------------------------------ -
---- -----
---
-------- ---------- -
------ -
-----
------ --
------
--
-这样可以保证在服务器端渲染时不会执行依赖于浏览器环境的代码，避免出现 window is not defined 错误。
3. 使用 useEffect 等钩子函数
如果我们需要在客户端渲染时执行某些依赖于浏览器环境的代码，我们可以使用 React 的钩子函数（如 useEffect、useLayoutEffect 等）来实现。例如：
------ - --------- - ---- --------
-------- ------------- -
------------ -- -
-- --------
-- ----
------ -
------- ---------------
--
-这样可以保证在服务器端渲染时不会执行依赖于浏览器环境的代码，避免出现 window is not defined 错误。
4. 使用环境变量判断是否为服务器端渲染
我们可以使用环境变量来判断当前是否为服务器端渲染，从而避免在服务器端执行浏览器端代码。例如：
-- --------------------- --- ------------ -- ------ ------ --- ------------ - -- -------- -
这样可以保证在服务器端渲染时不会执行依赖于浏览器环境的代码，避免出现 window is not defined 错误。
总结
在 Next.js 中处理 window is not defined 错误，我们可以使用 typeof 判断 window 是否存在、使用 dynamic import 按需加载组件、使用 React 的钩子函数以及使用环境变量判断是否为服务器端渲染。通过这些方法，我们可以避免在服务器端执行浏览器端代码时出现错误，并保证应用的正常运行。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/655e8f43d2f5e1655d8bbd9f