Next.js 12 震撼發(fā)布！打造現(xiàn)代化前端框架

就在剛剛過去的 10 月 27 日，Next.js 團(tuán)隊(duì)官宣了 12 版本發(fā)布。

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

• 采用Rust 編譯器：刷新速度提升 3 倍、構(gòu)建速度提升約 5 倍的
• Middleware (beta)：通過配置代碼在 Next.js 中實(shí)現(xiàn)完全的靈活性
• React 18 支持：支持 Suspense、React Server Components 等新特性
• AVIF 支持：選擇縮小 20% 的圖像
• Bot-aware ISR Fallback：為網(wǎng)絡(luò)爬蟲優(yōu)化 SEO
• 原生 ES 模塊支持：與標(biāo)準(zhǔn)化的模塊系統(tǒng)保持一致
• URL Imports (alpha)：支持從任何 URL 導(dǎo)入包（比如CDN），無需通過npm安裝

我們可以通過 npm i next@latest 安裝最新版的 Next.js。

Rust 編譯器

Next.js 12 現(xiàn)在默認(rèn)啟用了 Rust 編譯器，這使它大概提高了3倍的刷新速度和5倍的構(gòu)建速度。

這其實(shí)也是 Rust 邁出的一大步，因?yàn)樗姆€(wěn)定性現(xiàn)在在世界上最大的代碼庫之一上面得到的驗(yàn)證。

在編譯方便，使用 Rust 進(jìn)行編譯比 Babel 快了 17 倍，另外他們對(duì) webpack 進(jìn)行了大量的改進(jìn)，包括優(yōu)化快速刷新和按需引入。

Next.js 團(tuán)隊(duì)為了從 Babel 遷移到 Rust 費(fèi)了不小的功夫，比如他們實(shí)現(xiàn)了一個(gè)新的 Rust CSS 解析器 styled-jsx。

在壓縮方面，Rust 編譯器比 Terser 壓縮的速度要快 7 倍，壓縮是可選的：

//?next.config.js

module.exports?=?{
??swcMinify:?true
}

值得注意的是，Next.js 的 Rust 編譯器是基于 SWC 實(shí)現(xiàn)的。

swc 是一個(gè)用 Rust 寫的高性能 TypeScript / JavaScript 轉(zhuǎn)譯器，類似于 babel。

為此，Next.js 還專門把 SWC 作者 DongYoon Kang 和 Parcel 的核心貢獻(xiàn)者 Maia Teegarden 挖過去了。

Middleware

Next.js 12 在這個(gè)版本引入了中間件的概念，這就類似于 Koa 框架里面的中間件，它能讓你通過代碼來實(shí)現(xiàn)更靈活的操作，而不只是通過那些煩人的配置。

在中間件里，你可以拿到用戶的完整請(qǐng)求，然后你就可以對(duì)請(qǐng)求進(jìn)行重寫、重定向、添加 Header 等操作。

中間件里也支持例如 fetch 這樣的標(biāo)準(zhǔn)運(yùn)行時(shí) Web API。

如果想要在 Next.js 中使用中間件，你可以創(chuàng)建一個(gè) pages/_middleware.js 文件：

//?pages/_middleware.js

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

React 18 支持

Next.js 團(tuán)隊(duì)一直在和 Facebook 團(tuán)隊(duì)保持著緊密的合作， 雖然現(xiàn)在 React 18 只發(fā)布了 alpha 版本，在 Next.js 12 中依然為它提供了支持。

npm?install?react@alpha?react-dom@alpha

你只需要開啟一些實(shí)驗(yàn)配置就可以使用 React 18 中的 Suspense、全自動(dòng)批處理、startTransition 這些 API。

流式服務(wù)端渲染

React 18 中的并發(fā)渲染包括對(duì)服務(wù)器端 Suspense 和 SSR 流式渲染的支持，你可以通過開啟下面的配置啟用：

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

React Server Component

React Server Component 就是讓組件擁有在服務(wù)端渲染的能力，從而解決 用戶體驗(yàn)、可維護(hù)性、性能 這個(gè)不可能的三角問題。

Server Component 的主要兩點(diǎn)如下：

• 運(yùn)行在服務(wù)端的組件只會(huì)返回 DSL 信息，而不包含其他任何依賴，因此 Server Component 的所有依賴 npm 包都不會(huì)被打包到客戶端。
• 可以訪問服務(wù)端任何 API，也就是讓組件擁有了 Nodejs 能擁有的能力，你理論上可以在前端組件里干任何服務(wù)端才能干的事情。
• Server Component 與 Client Component 無縫集成，可以通過 Server Component 無縫調(diào)用 Client Component。
• Server Component 會(huì)按需返回信息，在當(dāng)前邏輯下，走不到的分支邏輯的所有引用都不會(huì)被客戶端引入。比如 Server Component 雖然引用了一個(gè)巨大的 npm 包，但某個(gè)分支下沒有用到這個(gè)包提供的函數(shù)，那客戶端也不會(huì)下載這個(gè)巨大的 npm 包到本地。
• 由于返回的不是 HTML，而是一個(gè) DSL，所以服務(wù)端組件即便重新拉取，已經(jīng)產(chǎn)生的 State 也會(huì)被維持住。比如說 A 是 ServerComponent，其子元素 B 是 Client Component，此時(shí)對(duì) B 組件做了狀態(tài)修改比如輸入一些文字，此時(shí)觸發(fā) A 重新拉取 DSL 后，B 已經(jīng)輸入的文字還會(huì)保留。
• 可以無縫與 Suspense 結(jié)合，并不會(huì)因?yàn)榫W(wǎng)絡(luò)原因?qū)е逻B Suspense 的 loading 都不能及時(shí)展示。
• 共享組件可以同時(shí)在服務(wù)端與客戶端運(yùn)行。

你可以通過下面的配置開啟：

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

ES Modules

ES Modules 為 JavaScript 帶來了官方的、標(biāo)準(zhǔn)化的模塊系統(tǒng)。目前所有主流瀏覽器以及Node.js 都對(duì)它提供了支持。

使用 ES Modules 可以大大的減少模塊依賴解析的時(shí)間，并且可以減小包體積。

從 Next.js 11.1 開始，Next 添加了對(duì) ES Modules 優(yōu)先于 CommonJS 模塊的實(shí)驗(yàn)性支持。在 Next.js 12 中，默認(rèn)開啟，但是現(xiàn)在也仍然支持導(dǎo)入僅提供 CommonJS 的 NPM 包。

URL imports

從 Next.js 12 開始，我們可以直接通過 URL 導(dǎo)入任何一個(gè)包，Next.js 能夠像處理本地依賴一樣處理遠(yuǎn)程 HTTP(S) 資源。

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

如果檢測(cè)到 URL imports ，Next.js 會(huì)生成一個(gè) next.lock 文件來跟蹤遠(yuǎn)程資源。URL imports 導(dǎo)入的包會(huì)在本地緩存一份，所以我們也不用擔(dān)心沒有網(wǎng)不能用。

我們只需要將允許導(dǎo)入的 url 前綴添加到配置文件中就可以了：

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

支持 AVIF 圖片

內(nèi)置的圖像優(yōu)化 API 現(xiàn)在支持 AVIF 格式了，與 WebP 相比，圖像會(huì)小 20%。

與 WebP 相比，AVIF 格式可能需要更長的時(shí)間來優(yōu)化，所以我們可以通過配置 next.config.js 的 images.formats 屬性來進(jìn)行選擇性啟用。

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

另外，對(duì)于不同瀏覽器的兼容情況，Next.js 會(huì)根據(jù)瀏覽器的嗅探情況，自動(dòng)選擇用 AVIF 或 Webp。

更多詳情請(qǐng)關(guān)注 Next.js 官方博客：https://z.org/blog/next-12