Next.js静态网站构建停滞问题求助（Chakra UI+Vercel部署）

我正在开发一款基于Chakra UI的Next.js静态Web应用，此前一切运行正常，但突然生产环境构建陷入无限「building」状态。在Vercel上部署时也遇到相同问题，此前的部署版本可正常访问，但无法推送新部署，且不清楚问题根源。我已尝试删除./next文件夹后重新构建，但问题仍未解决。

环境信息 #

• Node JS version: 19.1.0

package.json 内容 #

{
  "name": "slayitwithskin",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@chakra-ui/react": "^2.4.1",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@splidejs/react-splide": "^0.7.12",
    "eslint": "8.27.0",
    "eslint-config-next": "13.0.3",
    "framer-motion": "^7.6.6",
    "next": "13.0.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.6.0",
    "react-rainbow-components": "^1.31.0",
    "sass": "^1.56.1"
  }
}

1. 降级Node.js版本 #

Node 19.x属于非LTS的不稳定版本，Next.js 13.0.3对其兼容性存在潜在问题。建议切换到LTS版本（如18.x）：

• 用nvm安装并切换版本：nvm install 18 && nvm use 18
• 删除node_modules和package-lock.json，重新执行npm install后再尝试构建

2. 检查静态生成逻辑 #

无限构建大概率和getStaticProps/getStaticPaths的异常有关：

• 逐个检查页面的静态生成函数，确认是否存在无限循环（比如路径生成逻辑错误）
• 确保异步请求添加超时处理，避免因接口无响应导致构建卡住
• 临时注释部分页面的静态生成代码，逐步定位到触发问题的页面

3. 排查UI组件库冲突 #

项目同时引入了Chakra UI和react-rainbow-components两个完整UI库，可能存在样式或依赖冲突：

• 临时移除react-rainbow-components，重新安装依赖后执行构建，验证是否解决问题

4. 查看详细构建日志 #

• 本地执行next build --debug，通过详细日志定位卡住的具体阶段（比如编译某页面、优化资源）
• Vercel部署时，在控制台查看完整构建日志，确认卡顿环节

5. 彻底清理缓存与依赖 #

除删除./next文件夹外，还可执行：

• rm -rf node_modules package-lock.json
• npm cache clean --force
• 重新安装依赖后尝试构建

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