路由
应用路由 和 页面路由
next.js支持两种路由（或者也可以说是项目结构），页面路由是Next.js 13之前使用的路由结构（新版本的Next.js也支持页面路由），而应用路由是Next.js新版本中提供的另一种路由方式。这两种路由有着不同的文件结构。
但不管是应用路由还是页面路由，其本质都是文件系统路由。应用中的路由由文件的目录结构产生。
页面路由
页面路由默认应用于next.js 13.x之前的版本。
创建12.x版本的next.js项目，初始的目录结构：
javascript
npx create-next-app@12
（页面路由的默认结构）
创建13.x及以上版本的next.js，初始的目录结构：
javascript
npx create-next-app@latest my-next-app
（应用路由的默认结构）
页面路由的URL生成规则：
页面路由会根据pages文件下 的文件目录结构产生对应的路由。对于pages下的每一个文件，都会生成对应层级的路由，而路由页面对应的组件，自动为文件中的index.文件，index.文件的拓展名可以是.ts .js .tsx .jsx。
静态路由
静态路由的文件名都是本地直接写好的，固定名称的路由。
动态路由
动态路由的文件名由\[\]包裹，动态路由可以应用在index文件上，也可以应用在目录文件上。
普通动态路由
在使用页面路由的动态路由模式时，动态路由无法通过params获取，如果需要获取匹配的字段，需要通过useRouter获取。
这种模式只能匹配单层，也就是完全符合匹配模式的URL：
如果想要匹配多层结构，应该使用...segmentName，通过在括号内添加省略号，可以扩展动态段以捕获所有后续段。
捕获所有片段
匹配效果：
但这种格式下，...的部分起码应该具有一层路由，如果一层都没有，会无法匹配，提示找不到页面：
如果希望...的部分是可选的，可以匹配多层，也可以一层也不匹配，可以使用\[...]语法来进行替换。
可选的捕获所有片段
\[...segmentName\]
动态字符访问：
如果希望获取匹配到的动态字段，在页面路由模式下，无法直接从params中获取，需要使用useRouter进行获取。
useRouter
useRouter是React钩子。可以用于获取路由信息等。
引入：
javascript
import { useRouter } from "next/router";使用：
javascript
const router = useRouter();useRouter方法调用后，返回一个router对象。router对象上存在一些属性，可以获取对应的路由信息：
应用路由
与页面路由不同的是，应用路由的路由文件放在app文件目录下。
且页面默认显示的组件，是目录下的page.文件：
对于应用路由模式，动态路由规则与页面路由相同，但不同的是，应用路由的动态路由匹配字段会以params的形式注入到页面中，而不需要单独从useRouter中获取：
自定义应用
页面路由
在页面路由模式下，如果希望页面默认渲染自定义的组件，需要修改pages文件夹下的_app文件。
路由对应的页面，会自动填充到Component的位置。
而页面的props，默认是一个空对象。除非使用数据获取方法为页面进行预加载。
应用路由
在应用路由模式下，如果要创建共享的布局，需要修改app目录下的layout文件。
layout会在{chidren}处渲染路由组件或者layout文件。
