Next.js 13：服务器组件和应用程序目录的完整指南

您好，欢迎！在本教程中，我们将学习如何将 Next.js 13 与服务器组件和应用程序目录一起使用。

Next.js 13 带来了什么？
Next.js 13 是最流行的 React 框架的主要版本：事实上，它附带了一个新的路由系统，也称为 App Router。在许多方面，这个新的路由系统完全重写了之前的系统，并从根本上改变了我们编写 Next.js 应用程序的方式。

新app目录对现有pages目录进行了许多改进，经过一段时间的实验性发布后，它是编写 Next.js 应用程序的新默认方式。

服务器组件 (RSC)
新的 App Router 最大的变化是引入了 Server Components，这是一种新型的 React 组件，运行在服务器上并返回编译后的 JSX 发送给客户端。服务器组件可用于呈现页面骨架、从服务器并行获取数据并将其传递给“客户端组件”。

服务器组件是新目录中的默认组件类型app。

布局
由服务器组件提供支持，布局是包装页面的基础组件。Next.js 布局不仅可用于跨页面显示通用 UI，还可以重用跨页面的逻辑和数据获取。

布局还解决了瀑布问题，这是当前 Next.js 路由系统的常见问题。事实上，使用新的 App Router，我们可以并行获取数据，并将其传递给页面组件：这比当前的路由系统有了实质性的性能改进。

服务器操作
仍处于 alpha 阶段，Server Actions 是一种在服务器上执行函数的新方法，而不是通过 API 处理程序连接它们。服务器操作对于执行服务器端逻辑很有用，例如发送电子邮件或更新数据库。服务器操作对于提交表单、执行服务器端逻辑以及将用户重定向到新页面很有用。

此外，服务器操作为我们提供了重新验证从服务器组