Next.js 路由全面解析：从 Pages Router 迁移到 App Router
💡
原文中文，约3400字，阅读约需8分钟。
📝
内容提要
Next.js提供了两套路由解决方案：Pages Router和App Router。自v13.4版本起，App Router成为默认的路由系统，提供更强大的功能和更灵活的代码组织方式。
🎯
关键要点
-
Next.js 提供两种路由解决方案：Pages Router 和 App Router。
-
自 v13.4 版本起，App Router 成为默认路由系统，提供更多优势。
-
Next.js 的路由系统基于文件系统，每个文件对应一个路由地址。
-
App Router 提供更强大的功能、更好的性能和更灵活的代码组织方式。
-
App Router 通过引入 layout.js、template.js 等特殊文件改善代码组织。
-
App Router 与 Pages Router 可以共存，但 App Router 优先级更高。
-
App Router 通过文件夹定义路由，嵌套文件夹可创建嵌套路由。
-
页面通过创建名为 page.js 的文件来定义，展示 UI 内容。
-
布局文件通常命名为 layout.js，定义多个页面共享的 UI 结构。
-
模板通过 template.js 文件定义，创建新实例，不保持状态。
-
loading.js 文件用于展示加载界面，使用 React 的 Suspense API。
-
error.js 文件用于创建错误处理的展示 UI，使用 React 的 Error Boundary 功能。
-
not-found.js 文件用于定义 404 页面，自定义资源不存在时的效果。
➡️
