Next.js 14 终于来了！
在 Next.js Conf 大会上，Vercel 宣布发布用于 Web 开发的 React 框架 Next.js 的最新版本 14。新版本为开发人员提供了大量新功能和改进，使其使用起来更加方便和强大。
1.Turbopack：速度的新引擎
Next.js 14 引入了 Turbopack，这是一个基于 Rust 的引擎，能以前所未有的方式促进本地开发。据 Vercel 称，Next.js 14 提供了显著的性能提升，包括本地服务器启动速度提高了 **53%**，使用 Fast Refresh 进行代码更新的速度提高了 **94%**。
此外，使用 Turbopack 进行了 5,000 个 next dev 集成测试通过，Turbopack 是 Next.js 的底层 Rust 引擎。Vercel 表示，开发人员现在应该使用 next dev -turbo 会得到更快、更可靠的性能。该公司还表示，一旦 Turbopack 所有测试都通过了， Turbopack 将被移至稳定版（目前通过了 90% 的测试）。
2.Server Actions：简化数据突变
有没有想过无需专用 API 路由即可触发服务器端代码？
在此版本中，Next.js 团队通过稳定版本的 Server Actions 改进了开发人员在编写数据变更方面的体验，而 Server Actions 允许您定义异步服务器函数。您可以使用 Server Actions来 重新验证缓存数据、重定向到不同的路由、设置和读取 cookie 等等。
现在，只需在 React 组件中定义一个函数，就能在服务器上安全地执行操作。
下面是一个简化的示例：
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>
);
}
这不仅简化了代码，还减少了更改数据和重新渲染页面所需的网络往返次数，从而提升了用户体验。
3.Partial Prerendering：两全其美
Next.js 团队正在为 Next.js 开发的 "部分预渲染"（Partial Prerendering），这是一种针对具有快速初始静态响应的动态内容的编译器优化。
Partial Prerendering 基于十年来对服务器端渲染（SSR）、静态网站生成（SSG）和增量静态重验证（ISR）的研究和开发。
动机
Next.js 团队听到了开发者的反馈。目前有太多的运行时、配置选项和渲染方法需要考虑。开发者既希望获得静态的速度和可靠性，又希望支持完全动态的个性化响应。
同时，拥有出色的全局性能和个性化不应以复杂性为代价。
Next.js 团队面临的挑战是创造更好的开发人员体验，简化现有模型，同时不引入新的 API 供开发人员学习。虽然服务器端内容的部分缓存已经存在，但这些方法仍然需要满足我们所追求的开发人员体验和可组合性目标。
基于 React Suspense 构建
部分预呈现由您的 <Suspense /> 边界定义。下面是它的工作原理。请看下面的电子商务页面：
// app/page.jsx
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/> 边界生成一个静态外壳。来自 React Suspense 的回退被预渲染。
然后，外壳中的 Suspense 回退将被替换为动态组件，例如读取 cookie 以确定购物车状态，或者根据用户显示横幅。
当收到请求时，静态HTML外壳将立即提供：
<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 中读取用户会话信息，所以这个组件作为静态壳的一部分在同一HTTP请求中进行流式传输。因此不需要额外的网络往返。
import { cookies } from 'next/headers'
export default function ShoppingCart() {
const cookieStore = cookies()
const session = cookieStore.get('session')
return ...
}
为了获得最详细的静态外壳，可能需要添加额外的暂停边界。然而，如果您今天已经在使用 loading.js，这就是一个隐式的暂停边界，因此不需要进行任何更改来生成静态外壳。
4.其他特性
此外，Vercel还分离了阻塞和非阻塞的元数据，并废弃了一些元数据选项，包括视口（viewport）、颜色方案（colorScheme）和主题颜色（themeColor）。添加了新的元数据选项来替代这些选项。
除了发布 Next.js 14，Vercel还宣布推出了 Next.js Learn 上的新课程，该课程涵盖了Next.js应用程序路由器、Tailwind CSS、优化字体和图像、创建布局和页面等内容。
5.最后
总而言之，Next.js 14 是一个重要的版本，为开发人员带来了许多新功能和改进。如果您正在使用 Next.js 构建 Web 应用程序，那么您应该尽快升级到版本 14。
npx create-next-app@latest
大家都在看