Next.js 12 已经提供了一种通过基于文件的路由来处理路由的简单方法。将组件添加到 pages 文件夹会自动使其成为路由。
Next.js 13 引入了一个使用 app 目录的新路由系统,目前还在实验阶段。
新版本中,基于文件系统的路由器带有内置的布局设置、模板嵌套路由、加载 UI、错误处理以及对服务器组件和流的支持。
了解新的目录结构
Next.js 12 使用 pages 目录进行路由,但在 Next.js 13 中它被替换为 app/目录。pages/目录在 Next 13 中仍然有效,只要一个 URL 路径的映射不要同时在两个文件夹出现就行。
在 app 目录中,您使用文件夹来定义路由,这些文件夹中的文件用于定义 UI。还有一些特殊文件,例如:
page.tsx - 用于为特定路由创建 UI 的文件。
layout.tsx - 它包含路由的布局定义,可跨多个页面共享。它们非常适合导航菜单和侧边栏。在导航时,布局会保留状态并且不会重新呈现。这意味着当您在共享布局的页面之间导航时,状态保持不变。需要注意的一件事是,必须有一个最顶层布局(根布局)包含整个应用程序共享的所有 HTML 和 body 标签。
template.tsx -模板类似于布局,但它们不会保留状态,并且每次用于创建页面时都会重新呈现。模板非常适合每次安装组件时都需要运行特定代码的情况,例如,进入和退出动画。
error.tsx -此文件用于处理应用程序中的错误。它用 React 错误边界类包装一个路由,这样当该路由或其子路由发生错误时,它会尝试通过呈现用户友好的错误页面来从错误中恢复。
loading.tsx -当路由 UI 在后台加载时,加载 UI 会立即从服务器加载。加载 UI 可以是微调器或骨架屏幕。路由内容加载后,它会替换加载 UI,跟 Suspense 作用一致。
not-found.tsx -当 Next.js 遇到该页面的 404 错误时呈现未找到的文件。在 Next.js 12 中,您必须手动创建和设置 404 页面。
head.tsx -此文件指定其定义的路由段的 head 标记。
如何在 Nextjs13 中创建路由
- 在 app 文件夹中创建文件夹,例如 products(对应的 URL 路径是 /products)
- 在 products 文件夹中创建 page.tsx,用于定义路由的 UI。
创建嵌套路由
例如你向创建的 URL 路径是 /products/sale
那么你可以在 app 文件中创建 products 文件夹,在 products 文件夹中创建 sale 文件夹,在 sale 文件夹创建 page.tsx
文件路径:app/products/sale/page.tsx。
app 文件夹默认放的是服务器组件
服务器组件意味着您可以安全地访问一些 key,而不会将它们暴露在客户端。例如,您可以使用 process.env。
也可以直接与后端交互。无需使用 getServerSideProps 或 getStaticProps,因为您可以在服务器组件中使用 async/await 来获取数据。
例如:下面的代码请求 API
1 | async function getData() { |
使用客户端组件
如果需要使用 React hooks、事件侦听器或仅限浏览器的 API,需要在文件头部添加“use client”告诉 Nextjs 采用客户端渲染。
更具体的可以看
app 文件夹新特性-官方介绍
app文件夹内支持了很多react18新的特性,例如Server Components,Suspense,Streaming等。