在next的13版本中,推出了一个新的App路由,由React Server Components构建,它支持共享布局、内部路由、加载状态、错误处理等。
App路由的工作目录在app
目录中,app
目录独立于pages
目录,允许你一些路由使用pages
目录,保持原先的行为,而一些使用新的App Router。
App Router的优先级高于Pages Router。两种方式出现重复的URL时,在编译期间会报错。
默认的,在app
目录中的components均为Server component。
和Pages router类似,App router同样使用文件系统的目录结构
- 文件夹用于定义路由。路由由文件夹嵌套路径决定,遵循文件系统的层次结构,从根文件夹一直到包含page.js文件的最终子文件夹
- 文件夹被用于创建路由下的ui
每一个文件夹在路径中都表示为路由中的一个片段。
nextjs中的目录,可以创建特殊的文件夹,来实现特殊的功能
- layout 定义共享的ui,对子文件夹也生效
- page 单独的页面,且可公开访问
- loading 加载的页面,对子文件夹也生效
- not-found 404页面,对子文件夹也生效
- error 错误是的页面,对子文件夹也生效
- global-error 全局错误页面
- route 服务端api endpoint
- template 存放模板
- default 回滚ui,为并行路由
next中也包含一些特殊的文件,这些文件均为一种特殊的component,可以在react中直接使用
- layout.js
- template.js
- error.js
- loading.js(Suspense)
- not-found.js(ErrorBoundary)
- page.js
<Layout><Template></Template>
</Layout>