NextJS新增/pages页面显示空白无报错问题求助

• 检查组件导出规则
  确保Test组件是默认导出，NextJS仅识别页面文件的默认导出作为页面组件，命名导出会导致无法渲染。正确写法示例：

  export default function Test() {
    return <div>Test Page Content</div>;
  }
  

  复制页面时容易误保留原组件的命名导出，需重点核对。

• 核对文件与路由匹配

  • 确认文件名是全小写的test.js（或test.jsx），Linux/macOS系统大小写敏感，Test.js会导致路由无法匹配。
  • 访问路径需对应文件位置：直接放在/pages下的test.js对应http://localhost:3000/test，嵌套目录需对应嵌套路由。

• 简化组件排查逻辑
  暂时删除原页面的复杂逻辑，只返回基础HTML内容：

  export default function Test() {
    return <h1>Test Page</h1>;
  }
  

  如果此时能正常显示，说明原页面的依赖（如全局状态、环境变量）在复制后缺失，需逐步还原排查问题。

• 清除浏览器缓存
  用Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（macOS）强制刷新页面，避免浏览器缓存旧资源导致显示异常。

• 检查NextJS配置
  查看next.config.js中是否存在rewrites、redirects规则，是否拦截了/test路径；若配置了basePath，访问路径需带上base前缀（如basePath: '/app'对应/app/test）。

• 升级依赖版本
  部分旧版NextJS存在页面检测bug，尝试升级到稳定版：

  npm install next@latest
  

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