NextJS 13引入了一种新的路由方式,称为App Router或嵌套路由。这种路由方式与之前版本的页面路由有所不同,它提供了更好的可预测性、更简洁的代码结构和更好的性能。

App Router是一种基于文件系统的路由方式,路由的结构由文件和文件夹的层级决定。每个文件夹都代表一个嵌套的路由段,文件代表该路由段的组件。

例如,假设你有以下目录结构:

app/
  layout.js     
  page.js
  blog/
    layout.js
    [slug]/
      page.js

这将生成以下路由结构:

• / -> app/page.js
• /blog -> app/blog/layout.js
• /blog/[slug] -> app/blog/[slug]/page.js

可以看到,layout.js文件用于定义该路由段的布局,而page.js文件则定义该路由段的页面内容。

使用App Router有以下几个主要好处:

• 并行渲染:React Server Components可以在服务器上并行渲染,提高性能。
• 增量静态渲染(ISR) : 允许您在构建时预渲染页面的静态部分,并在请求时动态渲染其余部分。
• 简化的数据获取:与传统路由相比,数据获取逻辑更简单。
• 嵌套布局:布局可以跨多个路由级别共享,减少重复代码。