Next.js 14.2 包括了开发、生产和缓存方面的改进。
- 开发中的 TurboPack（发布候选版）：
next dev --turbo下 99.8% 的测试通过。 - 构建和生产改进： 减少了构建内存使用和 CSS 优化。
- 缓存改进： 使用
staleTimes可配置的失效时间。 - 错误开发体验改进： 更好的水合不匹配错误和设计更新。
立即升级或开始使用：
npx create-next-app@latest
TurboPack for Development (发布候选版)
在过去几个月中，我们一直在努力改进 TurboPack 的本地开发性能。在 14.2 版本中，Turbopack 的发布候选版现在已经可以在本地开发中使用：
- 集成测试中99.8%的测试通过。
- 我们验证了 Next.js 应用中使用的前 300 个
npm包可以使用 TurboPack 编译。 - 所有的 Next.js 示例 都可以与 TurboPack 一起工作。
- 我们集成了 Lightning CSS，这是一个快速的 CSS 打包工具和压缩器，用 Rust 编写。
我们已经在 Vercel 的应用中广泛地使用 Turbopack。例如，在 vercel.com 这个大型 Next.js 应用中，我们看到：
- 本地服务器启动速度提高76.7%。
- 使用快速刷新时，代码更新速度提高96.3%。
- 初始路由编译速度提高45.8%（Turbopack 目前尚未实现磁盘缓存）。
Turbopack 仍然是可选的，您可以使用以下命令尝试：
next dev --turbo
我们现在将专注于改进内存使用、实现持久性缓存和 next build --turbo。
- 内存使用 - 我们已经为调查内存使用构建了低级工具。现在您可以生成跟踪文件，其中包括性能指标和广泛的内存使用信息。这些跟踪文件使我们可以在不需要访问您应用程序源代码的情况下调查性能和内存使用。
- 持久性缓存 - 我们也正在探索最佳的架构选项，并且预计在未来的版本中分享更多细节。
next build- 尽管 Turbopack 尚不支持构建，但已经有74.7%的测试通过。您可以在 areweturboyet.com/build 查看进展。
要查看 Turbopack 中的支持和不支持的功能，请参阅我们的文档。
构建和生产改进
除了 TurboPack 的捆绑改进之外，我们还致力于改善所有 Next.js 应用程序（包括页面和应用路由器）的总体构建和生产性能。
树摇
我们确定了一个边界优化，可以对未使用的导出进行树摇。例如，从具有 "use client" 的文件中导入单个 Icon 组件不再包括该包中的所有其他图标。这可以大幅减少生产 JavaScript 捆绑大小。
在流行库如 react-aria-components 上测试此优化可以将最终捆绑大小减少51.3%。
注意： 当前此优化无法与 barrel 文件一起使用。在此期间，您可以使用
optimizePackageImports配置选项：
// next.config.ts
module.exports = {
experimental: {
optimizePackageImports: ['package-name'],
},
};
构建内存使用
对于规模极大的 Next.js 应用程序，在生产构建期间出现内存不足崩溃（OOM）。在调查用户报告和重现情况后，我们确定了根本问题是过度捆绑和最小化（Next.js 创建了更少、更大的 JavaScript 文件，并且存在重复）。我们重构了捆绑逻辑，并为这些情况优化了编译器。
我们的早期测试显示，在一个最小的 Next.js 应用程序中，内存使用和缓存文件大小平均减少了从 2.2GB 到不到 190MB。
为了更容易地调试内存性能，我们引入了 --experimental-debug-memory-usage 标志到 next build。在我们的文档中了解更多信息。
CSS
我们更新了生产 Next.js 构建期间如何优化 CSS，通过将 CSS 分块来避免在页面之间导航时出现冲突的样式。
现在 CSS 分块的顺序和合并是由导入顺序定义的。例如，base-button.module.css 将在 page.module.css 之前被排序：
// base-button.tsx
import styles from
'./base-button.module.css';
export function BaseButton() {
return <button className={styles.primary} />;
}
// page.tsx
import { BaseButton } from './base-button';
import styles from './page.module.css';
export function Page() {
return <BaseButton className={styles.primary} />;
}
为了保持正确的 CSS 顺序，我们建议：
我们不希望这种变化对大多数应用程序产生负面影响。但是，如果在升级时看到任何意外的样式，请根据我们文档中的建议检查您的 CSS 导入顺序。
缓存改进
缓存是构建快速可靠的 Web 应用程序的关键部分。在执行突变时，用户和开发人员都希望缓存更新以反映最新更改。我们一直在探索如何改进 App 路由器中的 Next.js 缓存体验。
staleTimes（实验性）
客户端路由器缓存 是一个设计用于在客户端缓存访问和预取路由以提供快速导航体验的缓存层。
根据社区反馈，我们已经添加了一个实验性的 staleTimes 选项，以允许配置客户端路由器缓存失效时间。
默认情况下，预取路由（使用没有 prefetch 属性的 <Link> 组件）将被缓存 30 秒，如果 prefetch 属性设置为 true，则为 5 分钟。您可以通过在 next.config.js 中定义自定义重新验证时间来覆盖这些默认值：
// next.config.ts
const nextConfig = {
experimental: {
staleTimes: {
dynamic: 30,
static: 180,
},
},
};
module.exports = nextConfig;
staleTimes 旨在改进希望更多地控制缓存启发式方法的用户当前体验，但它并不打算成为完整解决方案。在即将发布的版本中，我们将专注于改进整体缓存语义并提供更灵活的解决方案。
在我们的文档中了解有关 staleTimes 的更多信息。
并行和拦截路由
我们正在持续迭代并行和拦截路由，现在改进了与客户端路由器缓存的集成。
- 调用具有
revalidatePath或revalidateTag的服务器动作的并行和拦截路由将重新验证缓存并刷新可见的插槽，同时保持用户当前视图。 - 类似地，调用
router.refresh现在正确地刷新可见的插槽，保持当前视图。
错误开发体验改进
在 14.1 版本中，我们开始改进运行 next dev 时的错误消息和堆栈跟踪的可读性。这项工作在 14.2 中继续，现在包括更好的错误消息、应用路由器和页面路由器的叠加设计改进、亮色和暗色模式支持以及更清晰的 dev 和 build 日志。
例如，React 水合错误是我们社区中常见的困惑源。虽然我们已经改进了帮助用户确定水合不匹配源的功能（请参阅下文），但我们正在与 React 团队合作改进底层错误消息并显示发生错误的文件名。
之前：
之后：
React 19
在二月份，React 团队宣布即将发布 React 19。为了准备 React 19，我们正在将最新的功能和改进集成到 Next.js 中，并计划发布一个主要版本来管理这些更改。
像 Actions 及其相关的钩子这样的新功能，这些功能已经可以从React 峰值频道中使用，并且现在将
对所有 React 应用程序（包括仅客户端的应用程序）可用。我们很高兴看到 React 生态系统中更广泛地采用这些功能。
71