Next.js App Router要求所有路由页面必须以page.tsx（或.jsx）命名并置于对应文件夹内，直接在动态段路径下创建login.tsx等非标准文件名无法触发路由匹配。
next.js嵌套路由失效？揭秘`page.tsx`命名规范与动态路由结构
在 Next.js 的 App Router 中，路由结构完全由文件系统决定，而非文件名内容。你遇到的问题——/app/[locale]/admin/login.tsx 无法响应 http://url/admin/login 请求——根本原因在于：Next.js 不识别任意命名的 .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 访问。
?️ 解决方案：保持语义化 + 遵守约定
你无需接受“目录嵌套太深”的妥协，而是可通过合理组织文件夹层级 + 命名语义化兼顾清晰性与规范性：
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
/app/
└── [locale]/
└── admin/
├── page.tsx # → /admin
└── login/
└── page.tsx # → /admin/login ✅ 标准且可读
/app/[locale]/admin/login/page.tsx 内容可简洁书写：
// /app/[locale]/admin/login/page.tsx
import '../globals.scss';
export default function LoginPage() {
return (
<main><h1>Admin Login</h1>
{/* 登录表单逻辑 */}
</main>
);
}
? 提示：[locale] 是动态段，不影响子路径规则；只要 /admin/login/ 存在 page.tsx，该路由即生效，与 [locale] 的具体值无关。
⚠️ 常见误区与注意事项
- 不要重命名 page.tsx：login.tsx、index.tsx、default.tsx 等均无效；
- layout.tsx 和 loading.tsx 是可选辅助文件，但 page.tsx 是路由必需；
- 若需 /admin/login 同时支持 /admin/login/forgot，应建为：
/admin/login/ ├── page.tsx # /admin/login └── forgot/ └── page.tsx # /admin/login/forgot - 动态段（如 [locale]）和普通文件夹可自由组合，但每层路由终点必须是含 page.tsx 的文件夹。
✅ 总结
Next.js App Router 的哲学是 “文件即路由，文件夹即路径”。放弃对“扁平文件名”的执念，转而拥抱语义化文件夹结构（如 login/ 而非 login.tsx），不仅符合框架设计，更能提升项目可维护性——/admin/login/page.tsx 比 admin-login.tsx 更明确表达层级意图，也天然支持未来扩展（如 login/error/page.tsx）。严格遵守 page.tsx 规范，是解锁 Next.js 全功能路由能力的第一把钥匙。
