Next.js应用加载纯HTML文本而非渲染HTML的问题排查

• 静态资源加载路径错误：比如basePath配置因环境变量触发变更、CDN域名失效，导致CSS、JS等资源返回404，浏览器无法加载样式和交互脚本，仅能渲染原始HTML结构。
• 构建产物或环境配置异常：即使删除了.next文件夹，若构建时的环境变量（如NODE_ENV、ASSET_PREFIX）发生变化，或者依赖缓存（如node_modules/.cache）未清理干净，可能导致服务端生成的HTML未正确注入客户端脚本。
• 反向代理/服务器配置错误：Nginx、Apache等代理服务器的规则错误，将静态资源请求（如/_next/static/下的文件）转发给Next.js服务而非直接返回，导致资源加载失败。
• Content-Security-Policy（CSP）限制：浏览器或服务器端设置的CSP规则过于严格，阻止了内联脚本、外部资源的加载，Next.js无法完成客户端hydrate过程，页面停留在纯HTML状态。
• 依赖包损坏或版本冲突：node_modules中的依赖可能被意外修改（如自动更新、误操作），导致Next.js的客户端渲染逻辑异常，无法加载必要的运行时脚本。
• 浏览器扩展干扰：广告拦截器、隐私保护类插件可能误判Next.js的核心脚本为恶意资源，阻止其加载，导致页面无法完成渲染。
• SSR/SSG逻辑异常：动态路由的fallback配置错误，或者getServerSideProps/getStaticProps返回的数据格式异常，导致服务端生成的HTML缺少客户端渲染所需的标记。

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