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 [email protected]?安裝最新版的?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 [email protected] [email protected]

你只需要開啟一些實驗配置就可以使用?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 官方博客：傳送門