Next.js 12.1发布

我们很高兴在 Next.js 12.1 中发布我们最需要的一些功能：

• 按需ISR（Beta）：立即使用 getStaticProps 重新验证页面。
• SWC扩展支持：样式化组件、中继等。
• next/jest插件：使用SWC时，Jest零配置支持。
• 使用SWC快速压缩（RC）：速度比Terser快7倍。
• 自托管改进：Docker映像精简了80%。
• React18和服务器组件（Alpha）：改进了稳定性。

支持使用 npm i next@latest 更新您的项目

1.按需增量静态生成（测试版）

Next.js现在公开了一个unstable_revalidate()函数，允许您重新验证每个单独使用 getStaticProps 的页面。自从我们在 Next.js 9.5 中引入增量静态生成 (ISR) 以来，这是我们最需要的功能之一。

自 ISR 发布以来，我们已经看到 Tripadvisor、Parachute、HashiCorp 等公司大幅缩短了构建时间，同时保持了令人难以置信的性能。但是，我们已经听取了您对基于间隔的重新验证的反馈，并且很高兴能够提供更大的灵活性。

目前，如果您将重新验证时间设置为 60，则所有访问者将在一分钟内看到您网站的相同生成版本。使缓存无效的唯一方法是在一分钟后访问该页面的人。您现在可以按需手动清除特定页面的 Next.js 缓存。

这使得在以下情况下更容易更新您的网站：

• 来自无头 CMS 的内容已创建或更新
• 电子商务元数据更改（价格、描述、类别、评论等）

// pages/api/revalidate.js

export default async function handler(req, res) {
  // Check for secret to confirm this is a valid request
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Invalid token' })
  }

  try {
    await res.unstable_revalidate('/path-to-revalidate')
    return res.json({ revalidated: true })
  } catch (err) {
    // If there was an error, Next.js will continue
    // to show the last successfully generated page
    return res.status(500).send('Error revalidating')
  }
}

在 getStaticProps 中，您无需指定 revalidate 即可使用按需重新验证。如果省略 revalidate，Next.js 将使用默认值false（不重新验证），并且当unstable_revalidate() 调用时才会按需重新验证页面。

增量静态生成适用于支持 Next.js 构建 API的任何提供程序。从今天开始，当部署到 Vercel 时，将页面推送到边缘时，按需重新验证会在大约 300 毫秒内全球传播。

2.对SWC支持的改进

我们希望让每个 Next.js 应用程序在生产环境中构建的更快，并且在本地开发中获得更直观的反馈。Next.js 12引入了一个新的基于Rust的编译器，该编译器发挥了本地编译的优势。

在12.1中，我们添加了对 Next.js编译器的支持：

• 样式化组件
• 导入来源
• 遗留的装饰器
• 中继
• 删除react属性
• 删除控制台

添加了上述六种支持后，我们现在已经使用新的编译器将最常见的 Babel 插件移植到了 Rust。此外，我们正在开发一个用于通过 SWC 启用的高性能 WebAssembly 插件的系统。

3.零配置 Jest 插件

Next.js 现在使用基于 Rust 的 Next.js 编译器自动为您配置 Jest (next/jest) 来转换文件，包括：

• 自动模拟样式表（.css、.module.css 及其 .scss 变体）和图像导入
• 将.env加载到process.env
• 从测试解析和转换中忽略node_modules
• 从测试解析中忽略.next
• 为启用Next.js编译器转换的标志加载next.config.js

4.使用 SWC 更快的压缩

在 Next.js 12 中，我们使用 SWC 作为 Next.js 编译器的一部分引入了压缩。早期测试结果显示它比 Terser 快 7 倍。使用 SWC 进行压缩并将成为 12.2 中的默认设置。

您可以选择在 next.config.js 中使用 SWC 进行压缩：

// next.config.js

module.exports = {
  swcMinify: true
}

5.更快的图像优化

内置的图像优化 API 已更新以支持与 ISR 页面相同的模式，其中图像被提供过时并在后台重新验证（也称为 stale-while-revalidate）。

这是优化图像的显着性能改进。

6.自托管 Next.js 改进

Next.js 现在可以自动创建一个独立文件夹，该文件夹仅复制生产部署所需的文件。 这导致自托管 Next.js 应用程序的 Docker 映像缩小了约 80%。

要利用这种自动复制，您可以在 next.config.js 中启用它：

module.exports = {
  experimental: {
    outputStandalone: true
  }
}

这将在 .next/standalone 创建一个文件夹，然后可以在不安装 node_modules 的情况下自行部署该文件夹。

7.React 18、服务器组件和 SSR 流（Alpha）

如 Next.js Conf 所示，我们一直在努力将 React 18、服务器端 Suspense、流式 SSR 以及最终的服务器组件引入 Next.js。

服务器组件是 React 中的一项新功能，可让您通过分离服务器端和客户端代码来减少 JavaScript 包的大小。 服务器组件允许开发人员构建跨服务器和客户端的应用程序，将客户端应用程序的丰富交互性与传统服务器渲染的改进性能相结合。

我们已经为那些想要试用 alpha 版本的人更新了我们的文档：

• React 18
• Streaming SSR
• Server Components

对于在 Next.js 中遵循从 alpha 到 beta服务器组件的开发人员，以下是一些最近的更新：

• HTML中的内联服务器组件响应以避免第二次请求
• 改进了流式传输时的脚本加载以启用React18
• 支持React18中的新useId API
• 支持_app作为服务器组件
• 改进了服务器组件的代码拆分
• 改进的流媒体性能
• 能够更改Node.js和Edge(RFC)之间的默认运行时

我们正在努力使您能够运行在边缘服务器渲染的整个 Next.js 应用程序。 您可以选择哪些页面应该选择加入 Edge Runtime，这样您就可以在准备好从 Node.js 增量迁移页面。