Next.js生产环境router.push后路由无渲染页面冻结问题求助

问题背景 #

提交群组创建表单调用后端接口后，通过router.push跳转至/groups/[groupId]页面，URL正常变更，但客户端所有路由操作（包括链接点击、router.push）仅修改URL，页面完全不重渲染，陷入冻结状态。该问题仅在生产环境出现，开发环境无异常，控制台无报错信息。

已尝试操作 #

• 排查组件key是否导致重渲染被阻止
• 使用字符串路径直接调用router.push("/groups/ACTUAL GROUP ID")
• 添加{ unstable_skipClientCache: true }参数执行跳转
• 全网检索相关解决方案

进一步排查与解决建议 #

1. 严格校验axios请求的异步逻辑与错误处理

生产环境下axios的错误可能因环境差异被静默忽略，比如onSubmit未声明为async、未正确await请求，或catch块内代码抛出未捕获异常。修正示例代码：

const onSubmit = async () => {
  try {
    const res = await axios(/* 请求配置 */);
    // 严谨判断响应有效性，避免空值导致后续逻辑异常
    if (res?.data?.groupId) {
      // 直接使用拼接后的字符串路径，规避动态路由解析潜在问题
      router.push(`/groups/${res.data.groupId}`);
    }
  } catch (err) {
    // 生产环境可接入日志工具捕获错误，不要静默吞掉
    console.error("群组创建失败：", err);
  }
};

2. 检查_app.js全局入口的状态与渲染逻辑

Pages目录下_app.js的异常会直接影响全局路由渲染：

• 检查getInitialProps或useEffect中是否存在生产环境特有的未处理错误（比如数据预取失败）
• 给Component添加基于当前路径的key，强制路由切换时重新渲染组件：

function MyApp({ Component, pageProps, router }) {
  return <Component key={router.asPath} {...pageProps} />;
}

3. 调整路由跳转的缓存与加载策略

Next.js生产环境的路由缓存可能与动态路由冲突，尝试：

• 跳转时添加shallow: false参数，强制触发完整路由加载：

router.push(`/groups/${groupId}`, undefined, { shallow: false });

• 检查目标页面的getServerSideProps/getStaticProps配置，确保新创建的群组数据能被正确获取，避免缓存旧数据导致页面不更新。

4. 排查生产环境构建与依赖问题

• 清理构建缓存：删除.next目录、node_modules，重新安装依赖并构建
• 检查next.config.js中是否存在干扰路由的配置（如assetPrefix、自定义插件），尝试暂时恢复默认配置测试

5. 排查第三方库冲突

生产环境的代码压缩、树摇可能触发第三方库（如状态管理、UI组件库）的隐性bug，尝试逐步移除非必要第三方库，定位是否存在干扰Next.js路由机制的依赖。

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