一起学习Nextjs13新特性-app目录
Yakim Zhang

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 中创建路由

  1. 在 app 文件夹中创建文件夹,例如 products(对应的 URL 路径是 /products)
  2. 在 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
2
3
4
5
6
7
8
9
10
11
12
13
async function getData() {
try {
const res = await fetch("https://api.example.com/...");
return res.json();
} catch (error) {
throw new Error("Could not fetch data");
}
}

export default async function Page() {
const data = await getData();
return <div>data.xx</div>;
}

使用客户端组件

如果需要使用 React hooks、事件侦听器或仅限浏览器的 API,需要在文件头部添加“use client”告诉 Nextjs 采用客户端渲染。

更具体的可以看
app 文件夹新特性-官方介绍
app文件夹内支持了很多react18新的特性,例如Server Components,Suspense,Streaming等。