Next.js 的路由为何如此独特？
内容提要
Next.js是一个基于React的全栈框架，专注于服务器端渲染（SSR），具有强大且不寻常的路由机制。通过文件系统进行路由定义，自动创建相应的路由。支持布局定义、导航和动态路由。还支持路由拦截和API定义。基于文件系统的路由机制设计合理，直观且方便。
延伸解读
文件系统路由的直观与代价
Next.js 用目录结构直接定义路由，page.tsx 生成页面，layout.tsx 定义布局，无需单独维护路由表。这种声明式方式让项目结构一目了然，但目录名即路由也意味着重命名或移动文件会直接影响 URL，需要团队在重构时格外谨慎。
特殊语法背后的设计逻辑
动态路由 [xxx]、catch-all [...xxx]、可选 catch-all [[...xxx]] 以及路由组 (xxx)、并行路由 @xxx、拦截路由 (.) 和 (..) 等语法看似奇怪，但都借用了 JavaScript 展开符或文件系统路径符号的常见含义，理解后能降低记忆成本，也体现了设计的一致性。
路由拦截的适用场景与限制
拦截路由允许在特定导航场景下重写组件，例如点击表格项弹出编辑对话框，而直接访问链接则显示完整页面。但文章指出，刷新后仍会渲染原始组件，说明拦截仅对客户端导航生效，不适合依赖刷新后保持重写状态的场景。
页面路由与 API 路由的统一
Next.js 不仅用 page.tsx 定义页面，还能用 route.ts 定义 GET、POST 等 API，且动态路由、catch-all 等语法同样适用于 API 路由。这种统一让全栈开发更连贯，但需注意 route.ts 与 page.tsx 不能在同一路径下共存，避免冲突。
Q&A
Next.js的路由机制有什么独特之处？
Next.js的路由机制通过文件系统定义路由，自动创建相应的路由，支持动态路由、catch-all路由和路由拦截等特性。
如何在Next.js中定义动态路由？
在Next.js中，动态路由使用[xxx]语法来提取路径参数，例如定义路径为/dong/[param1]/[param2]。
什么是catch-all路由，如何使用？
catch-all路由使用[...slug]语法，可以匹配任意深度的路径，例如/dong2/a/b/c都会渲染同一组件。
Next.js如何处理路由拦截？
路由拦截通过在路由前添加(.)或(..)语法来实现，可以在特定场景下重写组件，但刷新后仍会显示原组件。
Next.js的布局定义是如何工作的？
布局在layout.tsx中定义，Next.js会自动将page.tsx组件包裹在layout.tsx组件中，支持每个层级的布局定义。
Next.js的API路由是如何定义的？
在Next.js中，API路由通过route.ts文件定义，可以使用GET和POST方法处理请求，支持动态路由参数。
