如何修复Next.js路由问题：登录页面访问空白

• 重启开发服务器：终止当前的npm run dev/yarn dev进程，重新启动。Next.js的文件系统路由依赖文件监听，删除重建文件夹后可能未触发热更新，重启能强制刷新路由映射。
• 确认pages目录位置：pages必须直接放在项目根目录（testproject/pages/login.jsx），不要嵌套进app文件夹——App Router和Pages Router是独立路由系统，混放会导致路由识别异常。
• 检查文件与导出规范：
  • 确保文件名是login.jsx（注意大小写，Next.js在类Unix系统下对文件名大小写敏感）
  • 验证组件默认导出无拼写错误（你的代码里export default Login是正确的，但可再次确认）
• 清理缓存文件：
  • 删除项目根目录下的.next文件夹（Next.js构建缓存）
  • 若存在node_modules/.cache目录也一并删除
  • 可选：重新执行npm install/yarn install，确保依赖完整性
• 排查配置文件干扰：打开next.config.js，检查是否开启了experimental.appDir（App Router实验特性）。如果想继续用Pages Router，需关闭该配置；若切换到App Router，需将登录页面改为app/login/page.jsx结构。
• 查看浏览器控制台报错：按F12打开开发者工具，切换到Console标签页，查看是否有JS语法错误、资源加载失败等提示——这些隐性错误往往是页面空白的直接原因。

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