Next.js页面短暂显示后空白问题排查及原因定位

问题情况 #

未修改任何代码的情况下，Next.js页面突然出现加载时短暂显示后直接变为空白的异常：

• 仅/login页面控制台有明确报错，注册页、OTP验证页无报错但同样空白
• 测试Chrome、Edge浏览器均存在该问题
• 网络面板无404错误，部署到Vercel生产环境后问题依然复现

已尝试的无效操作 #

• 重启开发服务器
• 删除.next文件夹后重新构建

根因定位 #

在标记了"use client"的客户端组件页面中，导入了一个函数，而该函数所在的文件引入了仅支持服务端运行的代码——客户端渲染环境无法解析这类服务端专属代码，最终导致页面崩溃空白。

解决方案 #

1. 拆分代码逻辑：将服务端专属逻辑与通用函数分离，确保客户端组件仅导入不依赖服务端API的函数部分
2. 梳理导入依赖链：检查客户端组件的所有导入路径，避免间接引入服务端专属模块（如Node.js内置的fs、node:path模块，或是Next.js中仅服务端可用的API）
3. 通过API封装调用：如果客户端必须使用相关逻辑，将服务端代码封装为API Route，客户端通过fetch请求调用该接口，避免直接导入服务端代码

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