Next.js项目部署到Vercel时出现Compiler server意外退出与location未定义错误

看起来你遇到了Next.js部署到Vercel时的两个典型问题，我来帮你一步步排查和解决：

一、解决"ReferenceError: location is not defined"错误 #

这个错误的核心原因是在服务器端渲染（SSR）过程中尝试访问了浏览器专属的location对象——服务器环境里并没有这个浏览器API。虽然你的组件已经加了"use client"指令，但可能还是有部分代码在构建阶段或服务器端被执行，或者依赖的第三方库内部存在访问location的逻辑。

你可以尝试这些方案：

• 确保浏览器API调用都在客户端生命周期内执行：你已经在useEffect里读取sessionStorage，这部分是正确的，但要检查是否有其他地方（比如组件顶层、非useEffect的钩子）直接调用了location或其他浏览器API，把它们移到useEffect或useLayoutEffect中即可。
• 添加客户端环境判断：如果某些场景必须访问location，可以先判断当前是否处于客户端环境：

  if (typeof window !== 'undefined') {
    // 这里写访问location或sessionStorage的代码
  }
  

• 排查第三方依赖：你的代码用到了react-firebase-hooks/auth和react-toastify，确认这些库是否存在在服务器端访问浏览器API的情况。如果是react-toastify的问题，可以尝试在客户端组件中延迟初始化它，或者配置它仅在客户端运行。

二、解决"Compiler server unexpectedly exited with code: null and signal: SIGKILL"错误 #

这个错误通常是构建过程中内存不足导致Vercel的构建进程被系统杀死，也可能是代码存在无限循环、依赖包体积过大或者构建配置不合理。

试试这些解决方案：

• 优化依赖与代码体积：检查package.json移除不必要的依赖，或者替换为更轻量的替代库；同时确认静态资源（比如图片）是否经过压缩，减少构建时的资源占用。
• 调整Vercel构建内存限制：Vercel免费计划有内存上限，如果你的项目构建需要更多内存，可以在项目根目录创建vercel.json文件，添加内存配置：

  {
    "build": {
      "env": {
        "NODE_OPTIONS": "--max-old-space-size=4096"
      }
    }
  }
  

  这个配置会给Node.js进程分配4GB内存，足以支撑大多数项目的构建需求。
• 检查代码中的无限循环：查看你的useEffect依赖项是否合理——比如第二个useEffect依赖了router，但useRouter返回的对象是稳定的，其实可以从依赖项中移除，避免不必要的重复触发；同时确认user状态变化是否正常，防止频繁触发useEffect导致资源耗尽。
• 清理缓存重新构建：有时候Vercel的缓存会引发奇怪的问题，你可以在部署控制台选择"Redeploy"，并勾选"Clear build cache"选项，重新执行构建流程。

额外代码优化建议 #

看你的代码还有几个小细节可以调整，能进一步避免部署问题：

• 移除useEffect依赖项中的router，因为useRouter返回的对象是稳定的，不会触发不必要的回调。
• 在loadGitHubFile函数开头添加判断，当user不存在时提前返回，避免后续代码报错：

  if (!user || !user.displayName) return;
  

• 读取sessionStorage时记得解析JSON，因为sessionStorage存储的是字符串格式：

  useEffect(() => {
    const sessionUserStr = sessionStorage.getItem("user");
    if (sessionUserStr) {
      const sessionUser = JSON.parse(sessionUserStr);
      setUserSession(sessionUser);
    }
  }, []);
  

按照这些步骤调整后，重新部署到Vercel应该就能解决这两个问题了。

备注：内容来源于stack exchange，提问作者T. Reimann