在Next.js 13.4中，使用App Router模式开发项目时，很多团队在扩展多页面功能时发现新加的页面一律返回404。这并非框架缺陷，而是路由系统对文件约定更加严格。理解其匹配规则后，问题通常能在几分钟内解决。
一、App Router的页面识别机制
Next.js 13.4引入的App Router以文件系统作为路由基础，但和旧的Pages Router不同，它只把特定文件名视作页面入口。在app目录下的任何层级中，必须存在名为page.js、page.jsx或page.tsx的文件，该文件路径才会暴露为可访问的URL。
例如，你希望创建/dashboard/settings页面，那么文件应当是app/dashboard/settings/page.tsx。如果你写成app/dashboard/settings/index.tsx或者app/dashboard/settings/Settings.tsx，框架不会为其生成路由，直接访问就会404。这一点和Pages Router允许index.*作为默认页面的逻辑完全不一样。
下面的代码展示了一个正确的页面文件写法：
// app/dashboard/settings/page.tsx
export default function SettingsPage() {
return (
<div>
<h1>系统设置</h1>
<p>这里是多页面中的设置页</p>
</div>
);
}
二、layout缺失导致的路由树断裂
除了页面文件命名，App Router要求每个有页面的子目录链路上最好具备layout.tsx，虽然不是每一级都强制，但根目录app/layout.tsx必须存在。若你在app下新建了子目录却忘了根布局，或者把布局写错位置，框架在构建路由树时会忽略该分支，从而让其中的页面全部404。
另外一个易错点是：如果你使用嵌套路由，父目录若只有page.tsx而没有layout.tsx，子目录页面仍可访问；但若父目录完全没有任何路由文件，仅作为分组文件夹，应使用括号路由如app/(shop)/product/page.tsx来避免路径冲突。混淆了普通目录与路由目录，也会让页面看似存在却无法命中。
我们对比一下错误与正确结构：
| 目录写法 | 访问路径 | 结果 |
|---|---|---|
| app/about/About.tsx | /about | 404错误 |
| app/about/page.tsx | /about | 正常渲染 |
| app/layout.tsx缺失 | 任意子页面 | 构建失败或404 |
三、默认导出与服务器端组件约束
App Router中的页面组件必须采用默认导出（export default），若使用命名导出，路由系统无法识别入口，同样返回404。此外，在13.4版本中，页面文件默认是服务器端组件，如果你在文件中误用仅浏览器端可用的API且未加'use client'指令，虽然不一定直接404，但可能在某些动态渲染下抛错而表现为空白或丢失页面。
排查时建议运行next dev并观察终端输出的路由表，确认目标路径是否出现在List of pages中。若未出现，优先检查文件名与目录层级。若已出现但仍404，再检查组件导出方式与是否存在同路由的冲突文件。
示例：确保使用默认导出
// app/contact/page.jsx
export default function Contact() {
return (
<section>
<h2>联系我们</h2>
<p>电话：400-000-0000</p>
</section>
);
}
四、与Pages Router的兼容方案
如果项目尚未完全迁移，Next.js 13.4允许app与pages目录共存。但若你在pages目录下建了pages/about.tsx，又在app下建了app/about/page.tsx，优先级会导致其中之一被忽略。官方规则是：当路径冲突时，app目录下的路由优先，pages中的对应文件失效，若配置不清就容易让人误以为自己写的pages页面突然404了。
因此创建多页面时，先确定统一路由策略。若采用App Router，就将所有新页面移入app并按page.*命名；若暂用Pages Router，则避免建立同名app子目录。清晰的结构是杜绝404的根本。
总结：Next.js 13.4多页面404的核心原因在于App Router只认page文件、依赖布局树且要求默认导出。按约定调整目录与导出方式即可解决。
Next.jsApp_Router404_error修改时间：2026-08-04 14:09:34