nextjs部署更新，Turbopack 和 Webpack 缓存冲突问题解决

问题现象

1. 网站部署后仍请求 nav.com 域名，而非预期的 api.qdgithub.com
2. 构建后出现 500 Internal Server Error
3. 浏览器请求错误的 API 地址

根本原因

1. 环境变量覆盖问题 ：.env.local 文件覆盖了 .env.production 中的 API 地址配置
2. 构建工具冲突：Turbopack 和 Webpack 缓存冲突
3. 组件导入错误 ：在 app/layout.js 中错误导入了 <Html> 组件（只能在 pages/_document.js 中使用）

解决方案

1. 清理环境变量

   • 删除或修改 d:\nav\nav_ui\.env.local 文件，确保生产构建使用正确的环境变量

2. 清理构建缓存

   # 停止服务
   # 在宝塔面板中停止 Node 项目
   
   # 清理缓存
   rm -rf /www/wwwroot/nav.qdgithub.com/.next
   rm -rf /www/wwwroot/nav.qdgithub.com/node_modules/.cache
   
   # 重新构建
   cd /www/wwwroot/nav.qdgithub.com
   npm run build
   
   # 启动服务
   # 在宝塔面板中启动 Node 项目

3. 修复组件导入

   • 检查并修复 app/layout.js 中的 <Html> 组件导入问题
   • 确保 <Html> 组件只在 pages/_document.js 中使用

4. 验证修复结果

   • 检查构建是否成功：ls -la /www/wwwroot/nav.qdgithub.com/.next/
   • 测试本地服务：curl -s http://127.0.0.1:3000
   • 浏览器访问验证：https://nav.qdgithub.com

预防措施

1. 环境变量管理 ：生产环境构建前确保 .env.local 文件不存在或配置正确
2. 构建缓存：每次部署前清理构建缓存，避免工具冲突
3. 代码规范 ：遵循 Next.js 组件使用规范，特别是 <Html> 等特殊组件
4. 部署流程：建立标准化的部署流程，包括缓存清理和环境检查步骤

技术要点

• Next.js 环境变量加载优先级 ：.env.local > .env.production > .env
• 构建工具兼容性：Turbopack 和 Webpack 缓存可能冲突，需要定期清理
• 组件使用规范 ：特殊组件如 <Html> 有严格的使用范围限制
• Nginx 配置：确保反向代理配置正确，避免缓存导致的旧文件加载

通过以上步骤，成功解决了网站部署后请求错误域名的问题，并修复了 500 Internal Server Error，确保网站正常运行。