Next.js嵌套路由失效问题往往源于对page.tsx命名规范的误解，本文将深入解析动态路由的正确配置方式。

Next.js App Router要求所有路由页面必须以page.tsx（或.jsx）命名并置于对应文件夹内，直接在动态段路径下创建login.tsx等非标准文件名无法触发路由匹配。

在Next.js的App Router架构中，路由匹配机制完全基于文件系统结构而非文件名本身。当出现/app/[locale]/admin/login.tsx无法响应/admin/login请求的情况时，其根本原因在于：框架仅识别特定命名的路由段文件，而非任意命名的.tsx文件。

✅ 正确的路由约定（App Router 核心规则）

Next.js规定每个可访问的路由路径必须对应包含page.tsx文件的文件夹。其中文件夹名称对应URL路径段，而page.tsx则负责该路径的默认组件渲染。

文件路径	对应 URL	是否有效	说明
/app/[locale]/admin/page.tsx	/admin	✅	admin 是文件夹，page.tsx 定义其内容
/app/[locale]/admin/login/page.tsx	/admin/login	✅	login 是子文件夹，符合嵌套结构
/app/[locale]/admin/login.tsx	❌ 无匹配路由	❌	login.tsx 是平级文件，不构成路由段，Next.js 忽略

因此，/app/[locale]/admin/login.tsx实际上会被视为普通工具文件（类似于utils/loginHelper.ts），不会注册任何路由路径，自然无法通过/admin/login进行访问。

?️ 解决方案：保持语义化 + 遵守约定

开发者无需因目录嵌套问题妥协，通过合理的文件夹层级组织与语义化命名即可兼顾代码清晰度和规范要求：

/app/  └── [locale]/      └── admin/          ├── page.tsx          # → /admin          └── login/              └── page.tsx      # → /admin/login  ✅ 标准且可读

/app/[locale]/admin/login/page.tsx文件内容可简化为：

// /app/[locale]/admin/login/page.tsximport '../globals.scss';export default function LoginPage() {  return (          

Admin Login

{/* 登录表单逻辑 */} );}

? 提示：[locale] 是动态段，不影响子路径规则；只要 /admin/login/ 存在 page.tsx，该路由即生效，与 [locale] 的具体值无关。

⚠️ 常见误区与注意事项

1. 禁止重命名page.tsx：login.tsx、index.tsx、default.tsx等替代命名均无效；
2. layout.tsx和loading.tsx属于可选辅助文件，但page.tsx是路由必需的核心文件；
3. 如需支持/admin/login和/admin/login/forgot双路径，应建立如下结构：

   /admin/login/  ├── page.tsx        # /admin/login  └── forgot/      └── page.tsx    # /admin/login/forgot

4. 动态段（如[locale]）可与普通文件夹自由组合，但每个路由终点必须是包含page.tsx的文件夹。

✅ 总结

掌握Next.js"文件即路由"的设计哲学，通过规范的page.tsx命名与语义化文件夹结构，可有效解决嵌套路由失效问题，同时提升项目的可维护性和扩展性。