Next.js 12 重大发布！打造现代化前端框架

就在刚刚过去的 10 月 27 日，Next.js 团队官宣了 12 版本发布。

就像在 Next.js Conf 上宣布的那样，Next.js 12 是 Next.js 有史以来最大的版本，更新概览如下：

• 采用 Rust 编译器：刷新速度提升 3 倍、构建速度提升约 5 倍的；
• Middleware (beta)：通过配置代码在 Next.js 中实现完全的灵活性；
• React 18 支持：支持 Suspense、React Server Components 等新特性；
• <Image />AVIF 支持：选择缩小 20% 的图像；
• Bot-aware ISR Fallback：为网络爬虫优化 SEO；
• 原生 ES 模块支持：与标准化的模块系统保持一致；
• URL Imports (alpha)：支持从任何 URL 导入包（比如 CDN），无需通过 npm 安装。

我们可以通过 npm i next@latest 安装最新版的 Next.js。

Rust 编译器

Next.js 12 现在默认启用了 Rust 编译器，这使它大概提高了 3 倍的刷新速度和 5 倍的构建速度。

这其实也是 Rust 迈出的一大步，因为它的稳定性现在在世界上最大的代码库之一上面得到的验证。

在编译方便，使用 Rust 进行编译比 Babel 快了 17 倍，另外他们对 webpack 进行了大量的改进，包括优化快速刷新和按需引入。

Next.js 团队为了从 Babel 迁移到 Rust 费了不小的功夫，比如他们实现了一个新的 Rust CSS 解析器 styled-jsx。

在压缩方面，Rust 编译器比 Terser 压缩的速度要快 7 倍，压缩是可选的：

// next.config.js

module.exports = {
  swcMinify: true
}

值得注意的是，Next.js 的 Rust 编译器是基于 SWC 实现的。

swc 是一个用 Rust 写的高性能 TypeScript / JavaScript 转译器，类似于 babel。

为此，Next.js 还专门把 SWC 作者 DongYoon Kang 和 Parcel 的核心贡献者 Maia Teegarden 挖过去了。

Middleware

Next.js 12 在这个版本引入了中间件的概念，这就类似于 Koa 框架里面的中间件，它能让你通过代码来实现更灵活的操作，而不只是通过那些烦人的配置。

在中间件里，你可以拿到用户的完整请求，然后你就可以对请求进行重写、重定向、添加 Header 等操作。

中间件里也支持例如 fetch 这样的标准运行时 Web API。

如果想要在 Next.js 中使用中间件，你可以创建一个 pages/_middleware.js 文件：

// pages/_middleware.js

export function middleware(req, ev) {
  return new Response('Hello, world!')
}

React 18 支持

Next.js 团队一直在和 Facebook 团队保持着紧密的合作， 虽然现在 React 18 只发布了 alpha 版本，在 Next.js 12 中依然为它提供了支持。

npm install react@alpha react-dom@alpha

你只需要开启一些实验配置就可以使用 React 18 中的 Suspense、全自动批处理、startTransition 这些 API。

流式服务端渲染

React 18 中的并发渲染包括对服务器端 Suspense 和 SSR 流式渲染的支持，你可以通过开启下面的配置启用：

// next.config.js
module.exports = {
  experimental: {
    concurrentFeatures: true
  }
}

React Server Component

React Server Component 就是让组件拥有在服务端渲染的能力，从而解决 用户体验、可维护性、性能 这个不可能的三角问题。

Server Component 的主要两点如下：

• 运行在服务端的组件只会返回 DSL 信息，而不包含其他任何依赖，因此 Server Component 的所有依赖 npm 包都不会被打包到客户端。
• 可以访问服务端任何 API，也就是让组件拥有了 Nodejs 能拥有的能力，你理论上可以在前端组件里干任何服务端才能干的事情。
• Server Component 与 Client Component 无缝集成，可以通过 Server Component 无缝调用 Client Component。
• Server Component 会按需返回信息，在当前逻辑下，走不到的分支逻辑的所有引用都不会被客户端引入。比如 Server Component 虽然引用了一个巨大的 npm 包，但某个分支下没有用到这个包提供的函数，那客户端也不会下载这个巨大的 npm 包到本地。
• 由于返回的不是 HTML，而是一个 DSL，所以服务端组件即便重新拉取，已经产生的 State 也会被维持住。比如说 A 是 ServerComponent，其子元素 B 是 Client Component，此时对 B 组件做了状态修改比如输入一些文字，此时触发 A 重新拉取 DSL 后，B 已经输入的文字还会保留。
• 可以无缝与 Suspense 结合，并不会因为网络原因导致连 Suspense 的 loading 都不能及时展示。
• 共享组件可以同时在服务端与客户端运行。

你可以通过下面的配置开启：

// next.config.js
module.exports = {
  experimental: {
    concurrentFeatures: true,
    serverComponents: true
  }
}

ES Modules

ES Modules 为 JavaScript 带来了官方的、标准化的模块系统。目前所有主流浏览器以及Node.js 都对它提供了支持。

使用 ES Modules 可以大大的减少模块依赖解析的时间，并且可以减小包体积。

从 Next.js 11.1 开始，Next 添加了对 ES Modules 优先于 CommonJS 模块的实验性支持。在 Next.js 12 中，默认开启，但是现在也仍然支持导入仅提供 CommonJS 的 NPM 包。

URL imports

从 Next.js 12 开始，我们可以直接通过 URL 导入任何一个包，Next.js 能够像处理本地依赖一样处理远程 HTTP(S) 资源。

import confetti from 'https://cdn.skypack.dev/canvas-confetti'

如果检测到 URL imports ，Next.js 会生成一个 next.lock 文件来跟踪远程资源。URL imports 导入的包会在本地缓存一份，所以我们也不用担心没有网不能用。

我们只需要将允许导入的 url 前缀添加到配置文件中就可以了：

module.exports = {
  experimental: {
    urlImports: ['https://cdn.skypack.dev']
  }
}

支持 AVIF 图片

内置的图像优化 API 现在支持 AVIF 格式了，与 WebP 相比，图像会小 20%。

与 WebP 相比，AVIF 格式可能需要更长的时间来优化，所以我们可以通过配置 next.config.js 的 images.formats 属性来进行选择性启用。

module.exports = {
  images: {
    formats: ['image/avif', 'image/webp']
  }
}

另外，对于不同浏览器的兼容情况，Next.js 会根据浏览器的嗅探情况，自动选择用 AVIF 或 Webp。

更多详情请关注 Next.js 官方博客：传送门