Next.js开发服务运行正常但浏览器加载20分钟无内容问题求助

1. 修复服务端重定向逻辑缺陷 #

你当前首页getInitialProps的重定向逻辑存在两处问题，是导致请求无限挂起的核心原因：

• 调用writeHead设置重定向响应头后，没有调用res.end()结束响应，导致Node服务一直保持连接不返回内容，浏览器持续加载
• 重定向地址写死了本地开发域名，部署后会失效，建议改为相对路径

修复后的代码如下：

// 省略其余代码
Home.getInitialProps = async (context) => {
  const user = await apolloClient.query({
    query: USER_QUERY,
  });
  if (!user.data?.user) {
    context.res.writeHead(307, { Location: "/welcome" });
    context.res.end(); // 新增这行结束响应
    return {
      data: null,
    };
  }
  // 仅序列化需要的用户数据，避免序列化全量apollo查询对象导致性能损耗
  return {
    data: JSON.stringify(user.data.user, null, 2),
  };
};

2. 清理损坏的编译缓存 #

Next.js开发服务的缓存文件损坏也会导致编译后无响应，执行以下命令清理缓存重新安装依赖：

# Windows环境执行
rmdir /s /q .next node_modules
del yarn.lock
yarn install
yarn dev

3. 兼容Windows开发环境的配置调整 #

Next.js 11.x版本在Windows环境使用默认的Webpack 5、多线程编译特性时存在已知的卡死问题，可以通过修改next.config.js配置兼容：

// next.config.js
module.exports = {
  // 临时切回Webpack 4验证是否为Webpack 5兼容问题
  webpack5: false,
  experimental: {
    // 关闭多线程编译避免Windows环境资源冲突卡死
    workerThreads: false,
    cpus: 1
  }
}

4. 可选版本适配 #

如果以上操作均无效，可以尝试将Next.js升级到11.1.4最新补丁版，或降级到10.2.3稳定版，避免版本兼容问题。

内容的提问来源于stack exchange，提问作者crispengari