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 官方博客：https://z.org/blog/next-12

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/iZzGBqPyU8PsF3Z8CBa72Q