DEV Community
·
Next.js 的路由为何如此独特？
💡
原文英文，约1700词，阅读约需7分钟。
📝
内容提要
Next.js是一个基于React的全栈框架，专注于服务器端渲染（SSR），具有强大且不寻常的路由机制。通过文件系统进行路由定义，自动创建相应的路由。支持布局定义、导航和动态路由。还支持路由拦截和API定义。基于文件系统的路由机制设计合理，直观且方便。
🎯
关键要点
- Next.js是一个基于React的全栈框架，专注于服务器端渲染（SSR）。
- Next.js具有强大且不寻常的路由机制，通过文件系统进行路由定义，自动创建相应的路由。
- 支持布局定义、导航和动态路由，路由机制设计合理，直观且方便。
- 可以通过创建目录和文件来自动生成路由，使用page.tsx定义页面。
- 布局可以在layout.tsx中定义，支持每个层级的布局定义。
- 动态路由使用[xxx]语法来提取路径参数，称为动态路由。
- 使用[...]语法定义任意深度的路由，称为catch-all路由。
- 可选的catch-all路由使用[[...xxx]]语法，允许匹配空参数。
- 路由组通过()语法定义，不参与路由，仅用于分组。
- 并行路由允许一个布局渲染多个页面，使用@符号表示。
- 路由拦截机制允许在特定场景下重写组件，使用(.)和(..)语法。
- Next.js不仅支持页面路由，还可以定义API，使用route.ts文件。
- Next.js的路由机制称为app router，最新的路由机制。
- 总结了Next.js的路由机制，包括动态路由、catch-all路由、路由组和并行路由等特性。
- Next.js的声明式路由基于文件系统，便于理解和维护。
➡️
