Next.js ReferenceError: location is not defined - Javascript

当在 Next.js 应用程序中运行代码时，你可能会遇到 ReferenceError: location is not defined 错误。这个错误通常是由于在服务器端代码中使用了与浏览器相关的全局对象或变量导致的。

在 Next.js 中，页面可以在服务器端呈现（服务器渲染）或在客户端呈现（客户端渲染）。当页面在服务器端呈现时，浏览器相关的全局对象（如 location、window）在服务器端是无法访问的，因此尝试在服务器端使用它们会导致此错误。

解决这个问题的一种方式是在使用这些浏览器相关对象之前，先检查代码是否在客户端环境上运行。可以使用 Next.js 提供的 typeof window !== 'undefined' 检查变量 window 是否已定义，从而判断代码是否在客户端环境中运行。

下面是一个例子，展示了如何在 Next.js 中使用此检查：

// 仅在客户端环境下运行的代码
if (typeof window !== 'undefined') {
  // 在这里可以安全地使用浏览器相关对象或变量
  console.log(location.pathname);
}

使用这种方法可以避免在服务器端引发 ReferenceError: location is not defined 错误，因为代码会在客户端执行时跳过这部分逻辑。

希望以上信息能帮助你解决 ReferenceError: location is not defined 错误。请记住，在 Next.js 中，需要注意服务器端和客户端代码的差异，确保避免在服务器端使用浏览器相关的全局对象或变量。