Vercel部署Next.js页面刷新时交替出现window未定义错误排查

一、交替成功/失败的原因 #

这个循环问题本质是Next.js的渲染策略和Vercel缓存机制共同作用的结果：

• 当请求触发**服务端渲染（SSR）**时，代码里访问window的逻辑在Node.js环境执行（服务端没有window对象），直接抛出错误；
• 当请求命中静态缓存/客户端渲染时，代码在浏览器环境运行，window存在，页面正常加载；
• 堆栈里的Timeout._onTimeout是关键线索——你的代码里有个定时器在服务端渲染阶段被初始化并触发了，回调里访问了window，这才是报错的根源。Vercel的缓存会交替返回SSR结果和缓存页面，所以出现了“刷新成功、再刷新报错”的循环。

二、定位出错代码（解决TS转译后行号不匹配问题） #

因为TS转译后行号和源码对应不上，你可以这么做：

• 本地执行npm run build生成生产环境代码，打开.next/server/pages/index.js，找到第291行附近的代码（堆栈指向的位置），分析这段代码对应的逻辑；
• 利用浏览器开发者工具的Source Map反向溯源：本地启动生产环境服务（npm run start），打开页面后在DevTools的Sources面板里找到转译后的JS文件，点击行号旁的箭头图标，就能跳转到对应的TS源码；
• 重点排查所有**定时器（setTimeout/setInterval）**的回调函数，以及组件顶层（函数组件最外层、类组件constructor）里的代码——这些地方容易在服务端执行时访问window。

三、具体解决办法 #

核心原则：让访问window的逻辑只在客户端执行，以下是几种可靠方案：

1. 用条件判断包裹window访问 #

在任何可能访问window的代码前，先判断环境：

if (typeof window !== 'undefined') {
  // 这里写需要window的逻辑，比如定时器回调
  setTimeout(() => {
    console.log(window.innerWidth);
  }, 1000);
}

2. 把客户端逻辑放到useEffect里 #

函数组件中，useEffect的回调只会在客户端渲染完成后执行，完全避开服务端环境：

import { useEffect } from 'react';

export default function Home() {
  useEffect(() => {
    const timer = setTimeout(() => {
      // 访问window的逻辑写在这里
    }, 1000);
    // 组件卸载时清理定时器，避免内存泄漏
    return () => clearTimeout(timer);
  }, []); // 空依赖数组确保只执行一次

  return <div>...</div>;
}

3. 动态导入依赖window的组件 #

如果某个组件或模块完全依赖浏览器环境，用Next.js的动态导入禁用SSR：

import dynamic from 'next/dynamic';

// 该组件只会在客户端渲染
const ClientOnlyComponent = dynamic(() => import('../components/MyClientComponent'), {
  ssr: false,
  loading: () => <div>Loading...</div> // 可选加载态
});

4. 排查第三方依赖 #

如果是引入的第三方库导致的问题，先暂时注释掉可疑库，看是否还报错。找到问题库后，查看它的文档是否有SSR兼容配置，或者替换为支持服务端渲染的替代库。

内容的提问来源于stack exchange，提问作者Can Poyrazoğlu