不过，

Next.js 与传统 React 项目的最大差异在于其基于文件程序的路由机制。在传统 React 项目中。开发者可以自由组织文件结构，路由需要单独配置；而 Next.js 通过文件程序的目录结构直接定义 URL 路由。这种设计虽然初看起来具有约束性。但一旦掌握，将大幅减少繁琐的路由配置工作。话说回来，

本章将程序性地讲解这套约定程序。

一、主要原则：文件方法映射 URL 方法

这是 App Router 的主要约定。必须：

src/app/page.tsx → /src/app/about/page.tsx → /aboutsrc/app/blog/page.tsx → /blogsrc/app/blog//page.tsx → /blog/任意值src/app/dashboard/settings/page.tsx → /dashboard/settings

文件与路由映射的基本规则如下：

• 每个"路由段"对应一个目录
• 目录中的 page.tsx 即为该路由的页面组件
• 仅 page.tsx 会成为可访问的页面其他文件不会暴露为路由

这一设计允许开发者在 app/ 目录中存放组件、工具函数甚至测试文件，无需担心使用者直接访问到它们。怎么说呢，

二、特殊文件：Next.js 的约定程序

在每个路由目录中，Next.js 识别若干特殊文件名，这些文件承担不同的职责：

• layout.tsx:共享布局，目录下的所有路由共享
• page.tsx:页面内容。每个路由的页面组件
• loading.tsx:页面处于加载状态时展示
• error.tsx:错误处理界面替代page组件展示
• notfound : 页面当路由片段对应的路由不存在时展示
• template.tsx:每次导航重置的布局

当使用者访问 /dashboard/settings 时Next.js 按以下顺序组合页面：

app/layout.tsx ← 最外层，包裹所有页面
app/dashboard/layout.tsx ← dashboard 专属布局
app/dashboard/settings/loading.tsx ← 数据加载时的占位
app/dashboard/settings/page.tsx ← 实际页面内容
若数据加载出错，Error.jsx?，将替代 ?显示，若路由不存在 接管。这套机制被称为"分层错误边界"，提供了优雅的错误处理方案。

L ...