Next.js嵌套文件夹结构下页面导航报错问题求助

1. 核心问题：路由路径不匹配 #

Pages Router的路由规则是：pages目录下的文件名直接对应URL路径，大小写敏感。你pages目录里的LoginPage.tsx对应的路由是/loginPage（注意首字母大写的P），但你在Link组件里写的是全小写的/loginpage，这直接导致了「页面未找到」错误。

修改Link的href为正确路径：

<Link href="/loginPage">Login</Link>

如果希望URL更规范，建议直接调整pages目录下的文件名：

• 将LoginPage.tsx改为login.tsx，对应路由/login
• 将SignupPage.tsx改为signup.tsx，对应路由/signup
  之后Link的href就可以写成更简洁的/login，符合常规URL命名习惯。

2. 混合路由模式的兼容性确认 #

你的项目同时存在app（App Router）和pages（Pages Router）目录，Next.js 13+默认支持这种混合模式，但需要注意：

• 确保next.config.js中没有禁用Pages Router（默认配置是启用状态）
• App Router组件中的next/link可以正常跳转Pages Router页面，只要路径正确即可

3. 额外验证步骤 #

• 启动项目后，直接在浏览器地址栏输入http://localhost:3000/loginPage（对应原文件名），确认页面是否能正常访问
• 检查LoginPage.tsx是否导出了默认组件：必须有export default LoginPage的代码，否则页面无法渲染

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