app Router VS pages Router（Next.js学习笔记）

前言

本片文章主要对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.jsexport default function LoginLayout({ children }) {return <div className='login-area'>{children}</div>
}

它所需要做的就是渲染一个自动传递的子组件 - 该子组件是 page.js 组件。
page.js 完全取决于我们。 由于布局是自动应用的，因此我们不需要在此文件中指定引用任何内容。

总结

app Router支持每个子路由都拥有自己的布局，从而实现更灵活的布局效果。没有设置布局的路由会延用父路由的布局