【译】Next.js 14 版本更新～

avatar
@: )

原文连接：nextjs.org/blog/next-1…

正如我们在 Next.js Conf 上宣布的那样，Next.js 14 是我们最关注的版本，其中包含：

  • Turbopack：5,000 次通过 App & Pages 路由器测试
    • 本地服务器启动速度提高 53%
    • 通过快速刷新将代码更新速度提高 94%
  • 服务器操作（稳定版）：逐渐增强的突变
    • 与缓存和重新验证整合
    • 简单的函数调用，或本地使用表单
  • 部分预渲染（预览版）：快速初始静态响应 + 流式动态内容
  • Next.js Learn（新）：免费课程去教授教授 App Router、身份验证、数据库等 立即升级或开始使用：
    npx create-next-app@latest

Next.js 编译器：涡轮增压

自 13 Next.js以来，我们一直在努力提高 Pages 和 App Router Next.js的本地开发性能。
以前，我们正在重写 next dev 和Next.js的其他部分以支持这项工作。从那以后，我们改变了我们的方法，变得更加渐进。这意味着我们基于 Rust 的编译器将很快达到稳定性，因为我们重新专注于首先支持所有Next.js功能。
5,000 个集成测试 next dev 现在正在通过我们的底层 Rust 引擎 Turbopack。这些测试包括 7 年的错误修复和重现。
vercel.com 在测试大型Next.js应用程序时，我们看到：

  • 本地服务器启动速度提高多达 53.3%
  • 通过快速刷新将代码更新速度提高多达 94.7%
    此基准测试是大型应用程序（和大型模块图）性能改进的实际结果。 next dev 现在 90% 的测试都通过了，您应该在使用 next dev --turbo 时始终看到更快、更可靠的性能。
    您可以跟踪 areweturboyet.com通过的测试百分比。

Forms and Mutations 形式和突变

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

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 Route 进行 make a fetch。

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,
    });
 
    // Handle response if necessary
    const data = await response.json();
    // ...
  }
 
  return (
    <form onSubmit={onSubmit}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

现在，在 Next.js 14 中，我们希望简化开发人员创作数据突变的体验。此外，我们希望在用户网络连接速度较慢或从低功耗设备提交表单时改善用户体验。

Server Actions (Stable) 服务器操作（稳定）

如果您不需要手动创建 API 路由，该怎么办？相反，你可以定义一个在服务器上安全运行的函数，直接从你的 React 组件调用。
App Router 建立在 React canary 通道上，该通道对于框架采用新功能是稳定的。从 v14 开始，Next.js 已升级到最新的 React canary ，其中包括稳定的服务器操作。
Pages Router 的上一个示例可以简化为一个文件：

export default function Page() {
  async function create(formData: FormData) {
    'use server';
    const id = await createItem(formData);
  }
 
  return (
    <form action={create}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

对于一些过去使用过以服务器为中心的框架的任何开发人员来说，服务器操作都应该感到熟悉。它建立在 Web 基础知识（如表单和 FormData Web API）之上。
虽然通过表单使用服务器操作有助于渐进式增强，但这不是必需的。您也可以直接将它们作为函数调用，而无需窗体。使用 TypeScript 时，这为您提供了客户端和服务器之间的完全端到端类型安全。
更改数据、重新呈现页面或重定向可以在一次网络往返中发生，确保在客户端上显示正确的数据，即使上游提供商速度很慢也是如此。此外，您可以编写和重用不同的操作，包括同一路由中的许多不同操作。

缓存、重新验证、重定向等

服务器操作已深度集成到整个 App Router 模型中。您可以：

  • 使用 revalidatePath() 或 revalidateTag() 重新验证缓存的数据
  • 重定向到不同的 redirect() 路线
  • 设置 cookies() 和读取 Cookie
  • 使用 useOptimistic()
  • 捕获并显示来自服务器的错误 useFormState()
  • 在客户端上显示 useFormStatus() 加载状态
    了解有关 Server Actions 的表单和变更或 Server Components 和 Server Actions 的安全模型和最佳实践的详细信息。

部分预渲染（预览版）Partial Prerendering （Preview）

我们想分享一个部分预渲染的预览，这是一种针对动态内容的编译器优化，具有快速的初始静态响应，我们正在为Next.js工作。
部分预渲染建立在十年来对服务器端渲染 （SSR）、静态站点生成 （SSG） 和增量静态重新验证 （ISR） 的研究和开发之上。

Motivation 赋予动机

我们已收到大家的反馈。目前有太多的运行时、配置选项和渲染方法需要考虑。您需要静态的速度和可靠性，同时还支持完全动态的个性化响应。
在全球范围内拥有出色的性能和个性化不应以牺牲复杂性为代价。
我们面临的挑战是创造更好的开发人员体验，在不引入新的 API 供开发人员学习的情况下简化现有模型。虽然服务器端内容的部分缓存已经存在，但这些方法仍然需要满足我们所追求的开发人员体验和可组合性目标。
部分预渲染不需要新的 API 来学习。

建立在 React Suspense 之上

部分预渲染由悬念边界定义。这是它的工作原理。请考虑以下电子商务页面：

export default function Page() {
  return (
    <main>
      <header>
        <h1>My Store</h1>
        <Suspense fallback={<CartSkeleton />}>
          <ShoppingCart />
        </Suspense>
      </header>
      <Banner />
      <Suspense fallback={<ProductListSkeleton />}>
        <Recommendations />
      </Suspense>
      <NewProducts />
    </main>
  );
}

启用“部分预渲染”后，此页面将根据边界 <Suspense /> 生成静态 shell。 fallback 来自 React Suspense 的预渲染。
然后，shell 中的悬念回退将替换为动态组件，例如读取 cookie 以确定购物车，或显示基于用户的横幅。
发出请求时，会立即提供静态 HTML shell：

<main>
  <header>
    <h1>My Store</h1>
    <div class="cart-skeleton">
      <!-- Hole -->
    </div>
  </header>
  <div class="banner" />
  <div class="product-list-skeleton">
    <!-- Hole -->
  </div>
  <section class="new-products" />
</main>

由于 <ShoppingCart />从cookies读取是为了查看用户会话，因此该组件将作为与静态 shell 相同的 HTTP 请求的一部分流入。无需额外的网络往返。

import { cookies } from 'next/headers'
 
export default function ShoppingCart() {
  const cookieStore = cookies()
  const session = cookieStore.get('session')
  return ...
}

要获得最精细的静态 shell，这可能需要添加额外的悬念边界。但是，如果您今天已经在使用 loading.js ，则这是一个隐式悬念边界，因此无需进行任何更改即可生成静态 shell。

Coming soon 即将推出

部分预渲染正在积极开发中。我们将在即将到来的次要版本中分享更多更新。

元数据改进

在从服务器流式传输页面内容之前，需要先将有关视口、配色方案和主题的重要元数据发送到浏览器。
确保这些 meta 标签与初始页面内容一起发送有助于流畅的用户体验，防止页面因更改主题颜色而闪烁，或因视口更改而改变布局。
在 Next.js 14 中，我们解耦了阻塞和非阻塞元数据。只有一小部分元数据选项被阻止，我们希望确保非阻止元数据不会阻止部分预呈现的页面提供静态 shell。
以下元数据选项现已弃用，并将在将来的主要版本中删除 metadata ：

  • viewport ：设置视口的初始缩放和其他属性
  • colorScheme ：设置视口的支持模式（浅色/深色）
  • themeColor ：设置视口周围的镶边应呈现的颜色
    从 Next.js 14 开始，有新的选项 viewport 并 generateViewport 替换这些选项。所有其他 metadata 选项保持不变。
    您可以立即开始采用这些新 API。现有 metadata 选项将继续有效。

Next.js Learn Course Next.js学习课程

今天，我们在 Next.js Learn 上发布了一个全新的免费课程。本课程教授：

  • Next.js APP router
  • 样式和 Tailwind CSS
  • 优化字体和图像
  • 创建布局和页面
  • 在页面之间导航
  • 设置 Postgres 数据库
  • 使用服务器组件获取数据
  • 静态和动态渲染
  • Streaming 流
  • 部分预渲染（可选）
  • 添加搜索和分页
  • 更改数据
  • 处理错误
  • 提高可访问性
  • 添加身份验证
  • 添加元数据
    Next.js Learn 已经向数百万开发人员传授了该框架的基础知识，我们迫不及待地想听听您对我们新增功能的反馈。前往 nextjs.org/learn 参加课程。
avatar
文章
阅读
粉丝