Next.js 路由全面解析：从 Pages Router 迁移到 App Router
内容提要
Next.js提供了两套路由解决方案：Pages Router和App Router。自v13.4版本起，App Router成为默认的路由系统，提供更强大的功能和更灵活的代码组织方式。
延伸解读
迁移时的共存与冲突风险
文章指出，App Router 与 Pages Router 可以共存，但 App Router 优先级更高。如果两者解析到同一个 URL，可能会导致构建错误。因此，在迁移过程中，需要仔细检查路由映射，避免同一路径在 pages 和 app 目录下重复定义，否则可能引发构建失败。
特殊文件如何改善代码组织
App Router 通过引入 layout.js、template.js、loading.js、error.js 和 not-found.js 等特殊文件，将页面结构、共享 UI、加载状态、错误处理和 404 页面等关注点分离。这种约定优于配置的方式，使得代码组织更清晰，便于维护和扩展。
布局与模板的关键区别
布局（layout.js）和模板（template.js）都用于共享 UI，但行为不同。布局在路由切换时保持状态，不会重新创建实例；而模板在每次路由切换时为每个 children 创建新实例，不保持状态。开发者应根据是否需要保留状态来选择使用布局或模板。
加载与错误处理的实现机制
loading.js 基于 React 的 Suspense API，在路由变化时立即展示 fallback UI，数据加载完成后再展示实际内容。error.js 则利用 React 的 Error Boundary 功能，捕获错误并展示自定义 UI，同时提供 reset 函数用于重试。这些机制提升了用户体验和应用的健壮性。
Q&A
Next.js 的路由系统有哪些类型？
Next.js 提供两种路由解决方案：Pages Router 和 App Router。
App Router 相比于 Pages Router 有哪些优势？
App Router 提供更强大的功能、更好的性能和更灵活的代码组织方式。
如何在 Next.js 中定义一个页面？
通过创建名为 page.js 的文件来定义页面，文件内容展示 UI。
App Router 中如何定义布局？
布局文件通常命名为 layout.js，定义多个页面共享的 UI 结构。
如何处理 Next.js 中的错误？
使用 error.js 文件创建错误处理的展示 UI，利用 React 的 Error Boundary 功能。
如何自定义 404 页面？
在 app 目录下新建 not-found.js 文件，以自定义资源不存在时的页面效果。
