NextJS 含getServerSideProps页面直接输入URL访问时白屏问题

针对你遇到的生产环境下直接访问带getServerSideProps的页面白屏、资源URL后追加undefined的问题，提供以下排查方向：

• 检查next.config.js的assetPrefix配置
  这是最常见的触发原因：如果你的next.config.js中配置了assetPrefix，但依赖的环境变量未在生产环境正确设置，就会导致assetPrefix变成undefined，所有资源路径都会被加上这个无效前缀。
  示例错误配置：

  module.exports = {
    assetPrefix: process.env.NEXT_PUBLIC_CDN_URL
  }
  

  解决：要么确保生产环境正确注入NEXT_PUBLIC_CDN_URL变量，要么给默认值避免undefined：

  module.exports = {
    assetPrefix: process.env.NEXT_PUBLIC_CDN_URL || ''
  }
  

• 排查页面中手动拼接的资源路径
  如果你在页面代码里手动拼接静态资源（图片、脚本等）的URL，比如使用了未初始化的变量作为路径前缀，就会出现undefined/xxx的错误路径。
  示例错误代码：

  const baseUrl = process.env.UNDEFINED_VAR;
  <img src={`${baseUrl}/logo.png`} />
  

  解决：检查所有手动拼接资源路径的代码，确保变量都有有效值，或者添加兜底默认值。

• 确认getServerSideProps未干扰资源配置
  虽然你加了try-catch，但要注意getServerSideProps中的代码是否意外修改了全局环境变量或资源相关配置。比如在try块中误将某个路径变量赋值为undefined，即使catch返回默认props，这个错误的变量已经影响了页面的资源加载。
  解决：在getServerSideProps中打印关键变量（如环境变量、路径前缀）的值，确认没有被意外覆盖；确保try块内的所有变量初始化逻辑都被覆盖，避免异常导致变量未定义。

• 检查Next.js版本与路由模式兼容性
  Next.js 13中Pages Router和App Router混用可能出现兼容性问题，如果你是用Pages Router的getServerSideProps，但项目中同时存在App Router的目录（app/），可能导致资源加载逻辑异常。
  解决：如果是纯Pages Router项目，删除app/目录；或者升级到Next.js 13的最新稳定小版本，修复已知的路由兼容bug。

• 验证生产构建的环境变量注入
  生产构建时如果环境变量未正确传递，会导致依赖这些变量的资源路径出错。比如客户端使用的环境变量必须带NEXT_PUBLIC_前缀，否则无法被注入到客户端代码中。
  解决：构建前用printenv命令检查环境变量是否存在；确保客户端使用的变量都添加NEXT_PUBLIC_前缀。

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