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 中获取并渲染草稿内容。草稿模式在 pagesapp 都可以使用。我们已经增强并简化了现有的 Preview Mode API(预览模式 API),它继续适用于 pages。预览模式在 app 中不起作用 —— 你应该使用草稿模式。

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


相關推薦

2023-04-10

Next.js 13.3 近日正式发布,新版本添加了多个社区用户要求的受欢迎的功能,并会在下一个次要版本中将 App Router 标记为稳定,Next.js 13.3 具体更新内容包括: 基于文件的 Metadata API 在 Next.js 13.2 中,Next.js 公布了一个新的 Metadata

2023-10-30

提供了网站托管服务,让开发者能够在上面开发、预览和发布 Web 应用,同时优化了前端开发者的开发和部署体验。 Next.js 14 主要变化: Turbopack: App & 页面路由通过了 5000 项测试 本地服务器启动速度提升 53% 使

2023-02-26

Next.js 13.2 近日正式发布,该版本包括对 App Router(app)的重大改进,为稳定性做准备。 内置 SEO 支持:新的元数据 API,可设置静态和动态meta标签。 路由处理程序:自定义请求处理程序,建立在 Web Request和 Response上。 MDX fo

2023-09-22

四世同堂,凭什么开发 30 岁就要被干掉? Next.js 13.5 已发布。Next.js 是一个用于服务器渲染的通用 JavaScript Web 应用程序的小型框架,该框架基于 React、Webpack 和 Babel 构建,为该网站提供了强大的支持。 新版本主要变化 本

2022-09-10

变化: 改进的 Fast Refresh:快速迭代对于本地开发工作流程至关重要。Next.js 使用 Fast Refresh 来即时反馈对 React 组件所做的编辑。.env、 jsconfig.json 和 tsconfig.json 文件现在可以热重载 TypeScript 自动安装:Next.js 内置了对自动配

2023-07-20

Ant Design 5.7.1 现已发布,主要变化如下: 补全 Menu 主题定制 token。#43576 修复 QRCode 在 Next.js 13 中报错 Can't resolve 'antd/lib/qr-code' 的问题。#43572 修复 antd 不支持在 Next.js App Router 中使用的问题,查看使用文档。#

2022-12-24

Next.js 13.1 近日正式发布,主要改进内容包括: app目录(测试版)的改进:改进了可靠性和性能 内置模块转译:将 next-transpile-modules 功能带入核心 Edge 运行时(稳定版):用于 Edge 的轻量级 Node.js 运行时 Turbopack 更新:支

2022-10-26

Next.js 13 现已发布,一些亮点更新内容包括: app/ Directory (beta):更简单、更快、更少的客户端 JS。 Layouts React Server Components Streaming Turbopack (alpha):速度提高 700 倍的基于 Rust 的 Webpack 替代品。 新的 next/image&n

2021-12-02

所有人都能使用 Remix。我们相信,将 Remix 以开源的方式发布将推动项目的创新,并使其他框架也能从我们取得的进展中受益。我们急于向他人学习,并回馈给他人。 由于项目刚刚开源,目前 Remix 的 GitHub 仓库内容仍在完善

2022-11-02

视为 Remix 在该领域的最大竞争对手。 近日 Remix 在官网发布公告,表示已经与 Shopify 达成协议,已被后者收购,但公告中并没有透露此次收购的金额。 Michael Jackson 和 Ryan Florence 在 2020 年共同创立了 Remix,在推出 Remix 框架之

2023-10-30

提供了网站托管服务,让开发者能够在上面开发、预览和发布 Web 应用,同时优化了前端开发者的开发和部署体验。 在最新发布的 Next.js 14 中,Server Actions 已到达稳定阶段。其团队表示,Server Actions 改进了开发者在编写数据

2022-08-16

Turborepo 1.4 已发布。 Turborepo 是一个适用于 JavaScript 和 TypeScript 代码库的高性能 monorepo 构建系统。 所谓 monorepo,简单来说就是将所有项目代码放到一个 Git / Mercurial / Subversion 代码仓库中。当下许多大型前端项目和公司都采

2022-05-21

,运行这么庞大的框架更是不可想象的难。 Archttp 版本发布前言 近几年 Golang 的发展很猛烈,比如使用 gin 框架就可以实现高并发能力的微服务应用,更是这几年的发展 NodeJS 写服务端的也是越来越多,尤其是 ExpressJS 这优秀

2023-01-20

StateOfJS 最新发布了 2022 年 JavaScript 现状调查报告指出,Solid 和 Qwik 等新兴前端框架正在挑战 React 的权威。该报告基于对近 40,000 名 Web 开发人员的调查,数量几乎是去年的两倍。 JavaScript 可能发展得很快,但 JavaScri