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

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

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等。