前言
本片文章主要对Next.js框架中的路由系统进行介绍，读者需要具备一定的JavaScript和react基础。相信通过本篇文章你会对Next.js框架的路由系统有更深的理解。
路由规则
app Router规则
- app Router按照文件夹名称构建路由
- 约定每一个路由下面必须有page.js文件
- layout.js文件用于定制布局，如果没有这个文件和父级路由的布局相同，通过layout.js文件可实现嵌套布局
- 动态路由参数约定文件夹名称[params],在该动态路由文件夹page.js文件中通过params参数获取
- 约定@filename文件夹时插槽文件，不生成路由，一般用于实现平行路由
pages Router规则
- pages Router按照js文件名字构建路由，每一个js组件文件都是一个路由
- 通过getStaticProps，getServerSideProps，getStaticPaths获取数据
总结
app Router基于文件夹命名构建路由，pages Router基于每一个js文件构建路由。因此pages Router的路由更加自由，学习成本也相对较小。
客户端和服务端组件（Client and server components）
客户端组件：
- 浏览器API
- 事件监听器
- 所有 React 钩子
- 非常适合在客户端生成一堆 HTML
服务器组件：
- 非常适合隐藏代码和秘密
- 不要传送大部分依赖项
- 直接访问后台
- 完全集成服务器操作
- 有利于seo
总结
客户端组件和服务器组件是app Router独有的。顾名思义，客户端组件运行在浏览器环境中，可用于dom操作；服务器组件运行在node.js环境中，可访问系统级api，多用于服务端渲染（SSR）。Next.js默认使用服务器组件，如果要使用客户端组件需要在文件开头显示声明("use Client")。
布局更简单
我已经提到了layout.js 文件，它可以位于每个路径的目录中。 该组件使布局变得简单，因为路径组件会自动应用于提供的布局。 让我们看一个例子。
在我们选择的路径目录中，我们创建一个 layout.js：
// layout.js
export default function LoginLayout({ children }) {
return <div className='login-area'>{children}</div>
}它所需要做的就是渲染一个自动传递的子组件 - 该子组件是 page.js 组件。
page.js 完全取决于我们。 由于布局是自动应用的，因此我们不需要在此文件中指定引用任何内容。
总结
app Router支持每个子路由都拥有自己的布局，从而实现更灵活的布局效果。没有设置布局的路由会延用父路由的布局