Next.js 14 的更新

如在 Next.js Conf 中宣布的，Next.js 14 版本更加专注于以下方面：

Turbopack

• App & Pages Router 的 5000 个测试通过。
• 本地服务器启动速度提高了 53%。
• 使用 Fast Refresh 进行代码更新的速度提高了 94%。

服务器端操作（Server Actions）

• 渐进式改进的增强型变异。
• 与缓存和重新验证集成。
• 可以直接调用简单函数或与表单一起使用。

部分预渲染（实验性功能）

• 快速的初始静态响应 + 动态内容的流式传输。

Next.js Learn（新课程）

• 免费教授 App Router、身份验证、数据库等内容的课程。

立即更新或使用以下命令开始：

npx create-next-app@latest

Next.js 编译器：Turbopack

从 Next.js 13 开始，我们一直在努力提高 Next.js 本地开发的性能，包括在页面和 App Router 中。

以前，我们正在重写 next dev 和 Next.js 的其他部分来支持这一努力。从那时起，我们改变了方法，更加增量化。这意味着基于 Rust 的编译器很快就会稳定下来，因为我们首先专注于支持 Next.js 的所有功能。

使用 Turbopack，Rust 中的底层引擎，现在有 5000 个 next dev 集成测试通过。这些测试包括 7 年的错误修复和再现。

在对 vercel.com，一个大型 Next.js 应用进行测试时，我们观察到：

• 本地服务器启动速度提高了 53.3%。
• 使用 Fast Refresh 进行代码更新的速度提高了 94.7%。

这个基准测试是对性能改进的实际结果，你应该在使用 next dev --turbo 时始终体验到更快、更可靠的性能，特别是在大型应用（和大型模块图）中。现在 90% 的 next dev 测试都通过了，你应该在使用 next dev --turbo 时始终体验到更快、更可靠的性能。

一旦测试通过率达到 100%，Turbopack 将在未来的次要版本中转为稳定版本。我们还将继续支持使用 webpack 进行自定义配置和生态系统插件。

你可以在 areweturboyet.com 上跟踪测试通过率的百分比。

表单和变异

Next.js 9 引入了 API 路由，这是一种快速构建后端端点的方法，可以与前端代码一起使用。

例如，你可以在 api/ 目录下创建一个新文件：

// pages/api/submit.ts

import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const data = req.body;
  const id = await createItem(data);
  res.status(200).json({ id });
}

然后，在客户端上，你可以使用 React 和 onSubmit 事件处理程序向你的 API 路由发送请求：

// pages/index.tsx

import { FormEvent } from 'react';

export default function Page() {
  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    const formData = new FormData(event.currentTarget);
    const response = await fetch('/api/submit', {
      method: 'POST',
      body: formData,
    });

    // 处理响应，如果有必要
    const data = await response.json();
    // ...
  }

  return (
    <form onSubmit={onSubmit}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

现在，使用 Next.js 14，我们希望简化开发人员在创建数据变异时的体验。此外，我们希望在用户网络连接缓慢或从低功耗设备发送表单时改善用户体验。

服务器端操作

如果不需要手动创建 API 路由，你可以定义一个安全地在服务器上运行的函数，直接从你的 React 组件中调用。

// app/page.tsx

export default function Page() {
  async function create(formData: FormData) {

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！