Next.js 13.4 发布，App Router 已稳定

Next.js 13.4 是一个基础更新版本，标志着 App Router 一达到稳定，可用于生产。

App Router（稳定）

自 6 个月前发布 Next.js 13 以来，团队一直专注于为 Next.js-App Router 的未来打下基础，以一种可以渐进式采用的方式，避免不必要的破坏性变化。随着 13.4 的发布，开发者现在可以开始在生产中使用 App Router 了。

今天将 App Router 标记为稳定并不意味着工作已经完成。稳定意味着 App Router 的核心已经为生产做好了准备，并且经过了我们自己的内部测试以及许多 Next.js 早期用户的验证。

在 2016 年发布 Next.js 时，Next.js 为 React 应用程序的服务器渲染提供了一种简单的方法，Next.js 的一些设计原则：

• 零设置，将文件系统作为一个 API 使用
• 只有 JavaScript，所有东西都是函数
• 自动服务器渲染和代码拆分
• 数据的获取由开发者决定

Turbopack (Beta)

Turbopack 是正在测试和稳定的新捆绑程序，它有助于在你开发 Next.js 应用程序（通过 next dev --turbo ）和不久后的生产构建（ next build --turbo ）中加快本地迭代的速度。

自 Next.js 13 的 alpha 版本发布以来，随着努力修补错误和增加对缺失功能的支持，Turbopack 采用率在稳步增长，并收集了很多反馈和提高稳定性。现在 6 个月过去了，Turbopack 已经准备好进入测试阶段。

Turbopack 目前还没有完全与 webpack 和 Next.js 实现功能对等，不过现在应该可以支持大部分的使用情况了。我们在这个测试版中的目标是继续解决因采用率增加而产生的剩余错误，并为未来版本的稳定性做准备。

Server Actions (Alpha)

在 React 生态中，围绕着表单、管理表单状态以及数据的缓存和重新验证，已经有了很多创新和探索。

目前的解决方案要么是可重用的客户端解决方案，要么是内置于框架的基元。到目前为止，还没有一种方法可以将服务器变更（Mutations）和数据原语结合起来。React 团队一直在为变更的第一方解决方案而努力。

我们很高兴地宣布支持 Next.js 中的实验性 Server Actions，使你能够在服务器上变更数据，直接调用函数而不需要创建一个中间的 API 层。

 // app/post/[id]/page.tsx import kv from './kv'; export default function Page({ params }) { async function increment() { 'use server'; await kv.incr(`post🆔${params.id}`); } return ( <form action={increment}> <button type="submit">Like</button> </form> ); } 

有了 Server Actions，你就有了强大的服务器优先的数据变更，更少的客户端 JavaScript，以及逐步增强的表单。

 // app/dashboard/posts/page.tsx import db from './db'; import { redirect } from 'next/navigation'; async function create(formData: FormData) { 'use server'; const post = await db.post.insert({ title: formData.get('title'), content: formData.get('content'), }); redirect(`/blog/${post.slug}`); } export default function Page() { return ( <form action={create}> <input type="text" name="title" /> <textarea name="content" /> <button type="submit">Submit</button> </form> ); } 

其他改进

• Draft Mode（草稿模式）：从你的 headless CMS 中获取并渲染草稿内容。草稿模式在 pages 和 app 都可以使用。我们已经增强并简化了现有的 Preview Mode API（预览模式 API），它继续适用于 pages。预览模式在 app 中不起作用 —— 你应该使用草稿模式。

更多详情可查看：https://nextjs.org/blog/next-13-4