跳至內容
返回部落格

2021 年 8 月 11 日，星期三

Next.js 11.1

發佈者
DongYoon Kang
DongYoon Kang@kdy1dev
Jiachi Liu
Jiachi Liu@huozhi
JJ Kasper
JJ Kasper@_ijjk
Maia Teegarden
Maia Teegarden@padmaia
Shu Ding
Shu Ding@shuding_
Steven
Steven@styfle
Tim Neutkens
Tim Neutkens@timneutkens
Tobias Koppers
Tobias Koppers@wSokra

我們正在使用 Next.js 11.1 改進整個堆疊的建置效能，其中包含：

立即更新，執行 npm i next@latest。

安全性修補程式

Next.js 團隊與安全研究人員和稽核人員合作，以防止漏洞。我們感謝來自 Robinhood 的 Gabriel Benmergui 對 pages/_error.js 開放式重新導向的調查和發現，以及後續的負責任揭露。

回報的問題並未直接危害用戶，但它可能允許透過從受信任的網域重新導向到攻擊者的網域來進行網路釣魚攻擊。我們已在 Next.js 11.1 中發布了一個修補程式，以防止此開放式重新導向的發生，同時也新增了安全回歸測試。

更多詳細資訊，請閱讀公開的 CVE。我們建議升級到最新版本的 Next.js，以提升應用程式的整體安全性。未來若要負責任地揭露報告，請透過 security@vercel.com 與我們聯繫。

注意：託管在Vercel上的 Next.js 應用程式不受此漏洞的影響（因此，在 Vercel 上執行的 Next.js 應用程式不需要任何操作）。

ES 模組支援

我們正在努力在 Next.js 中提供更廣泛的ES 模組支援，包括作為輸入模組和輸出目標。從 Next.js 11.1 開始，您現在可以使用實驗性旗標導入使用 ES 模組的 npm 套件（例如，在其 package.json 中設定 "type": "module"）。

next.config.js
module.exports = {
  // Prefer loading of ES Modules over CommonJS
  experimental: { esmExternals: true },
};

ES 模組支援包含向下相容性，以支援先前 CommonJS 的導入行為。在 Next.js 12 中，esmExternals: true 將成為預設值。我們建議您嘗試新的選項，並在您有任何改進建議的情況下，在 GitHub 討論區留下您的意見回饋。

採用基於 Rust 的 SWC

我們正致力於整合 SWC，這是一個以 Rust 編寫的超快速 JavaScript 和 TypeScript 編譯器，它將取代 Next.js 中使用的兩個工具鏈：用於個別檔案的 Babel 和用於縮小輸出 bundles 的 Terser。

作為用 SWC 取代 Babel 的一部分，我們正在將 Next.js 使用的所有自訂程式碼轉換移植到以 Rust 編寫的 SWC 轉換，以最大限度地提高效能。例如，移除 getStaticProps、getStaticPaths 和 getServerSideProps 中未使用的程式碼。

作為取代 Terser 的一部分，我們正致力於確保 SWC 縮小器的輸出與 Terser 類似，同時大幅提升縮小效能和並行化。

在早期測試中，使用 Babel 進行程式碼轉換的時間從約 500 毫秒縮短到約 10 毫秒，而使用 Terser 進行程式碼縮小的時間則從約 250 毫秒縮短到約 30 毫秒。總體而言，這使得建置速度提高了一倍。

我們很高興地宣布，DongYoon Kang（SWC 的創建者）以及 Maia Teegarden（Parcel 的貢獻者）已加入 Vercel 的 Next.js 團隊，致力於提升 next dev 和 next build 的效能。我們將在下一個穩定版本中分享更多關於 SWC 導入的成果。

效能提升

建置與資料擷取

在使用 next build 並發出大量 HTTP 請求時，我們平均提升了約 2 倍的效能。例如，如果您使用 getStaticProps 和 getStaticPaths 從無頭 CMS 擷取內容，您應該會看到明顯更快的建置速度。

Next.js 會自動填充 node-fetch 的 polyfill，現在預設啟用 HTTP 持續連線（Keep-Alive）。根據 外部基準測試，這應該會讓預渲染速度提升約 2 倍。

要停用某些 fetch() 呼叫的 HTTP 持續連線，您可以新增 agent 選項

import { Agent } from 'https';
const url = '<https://example.com>';
const agent = new Agent({ keepAlive: false });
fetch(url, { agent });

要全域覆寫所有 fetch() 呼叫，您可以使用 next.config.js

next.config.js
module.exports = {
  httpAgentOptions: {
    keepAlive: false,
  },
};

來源映射圖

由於 webpack 資源和來源映射圖處理方面的優化，在 Next.js 應用程式中包含瀏覽器來源映射圖現在的效能成本降低了約 70%，記憶體成本降低了約 67%。

這僅影響在 next.config.js 檔案中設定 productionBrowserSourceMaps: true 的 Next.js 應用程式。使用 Next.js 11.1 時，啟用來源映射圖只會增加 11% 的建置時間。

我們也與 Sentry 合作，提升了使用Sentry Next.js 插件上傳來源映射圖的效能。

ESLint 的改進

在 Next.js 11 中，我們透過 next lint 引入了內建的 ESLint 支援。自首次發佈以來，我們持續新增規則來協助開發者修正應用程式中的常見錯誤。

預設無障礙規則

現在預設包含更完善的無障礙規則，可防止 ARIA 屬性彼此不匹配以及使用不存在的 ARIA 屬性等問題。這些規則預設會發出警告。

特別感謝社群貢獻者 JeffersonBledsoe 新增這些規則。

常見的拼寫錯誤

現在，預設情況下，會針對 getStaticProps、getStaticPaths 和 getServerSideProps 中常見的拼寫錯誤發出警告。這將有助於處理因小拼寫錯誤導致未呼叫資料擷取的情況。例如，getstaticprops 或 getStaticprops 將會顯示警告。

特別感謝社群貢獻者 kaykdm 建立此規則。

next/image 的改進

我們一直在收集社群關於 next/image 和內建 圖片最佳化 的意見回饋，並很高興分享在效能、開發者體驗和使用者體驗方面的多項改進。

影像優化

Next.js 預設使用 WebAssembly 進行影像優化，藉由大幅縮小 Next.js 套件的安裝大小以及移除安裝後步驟來抵銷安裝時間。從 Next.js 11.1 開始，您可以選擇安裝 sharp，它可以最佳化未快取的影像產生時間，但會犧牲安裝速度。

基於 WebAssembly 的影像優化器已更新，可支援在 Node.js 16 環境下使用 ARM 晶片，例如 Apple M1。

內建的影像優化器現在會根據回應主體的內容自動偵測外部影像的內容類型。這讓 Next.js 可以在回應標頭為 Content-Type: application/octet-stream 時，優化託管在 AWS S3 上的影像。

在開發環境中延遲產生模糊預覽圖

在執行 next dev 時，使用 placeholder="blur" 的靜態影像導入現在會自動延遲產生，從而改善了包含大量靜態影像導入的應用程式的開發伺服器啟動時間。

pages/index.js
import Image from 'next/image';
import author from '../public/me.png';
 
export default function Home() {
  return (
    // The placeholder for this image is lazy-generated during development
    <Image src={author} alt="Picture of the author" placeholder="blur" />
  );
}

其他影像改進

  • 先前已載入的影像將不再延遲載入：當影像先前已在頁面上載入過，無論是透過客戶端導覽還是載入頁面上的其他位置，Next.js 現在會自動略過延遲載入，避免在顯示影像前出現短暫的閃爍。
  • 支援搭配 next export 使用自訂影像載入器： next/image 現在支援搭配任何第三方影像優化服務使用 next export。當您打算提供自訂 loader 屬性給 next/image 時，您可以在 next.config.js 中設定 images.loader: "custom"。
  • 影像載入完成的新事件： 根據使用者回饋，我們在 next/image 中新增了一個新的屬性 onLoadingComplete。這允許註冊一個在影像完全載入後才會被呼叫的回呼函式。
  • 預設影像快取 TTL（存活時間）的設定：您現在可以在 next.config.js 中設定 images.minimumCacheTTL 來更改優化影像的預設快取 TTL。如有可能，我們建議使用靜態影像 import，因為它們會自動使用最長的 TTL，因為影像內容雜湊值包含在網址中。

社群

Next.js 是超過 1,700 位個別開發者、Google 和 Facebook 等業界合作夥伴以及我們的核心團隊共同努力的成果。

我們很自豪地看到這個社群持續成長。僅在過去六個月內，我們就看到 Next.js 在 NPM 上的下載量增加了 50%，從 410 萬次增加到 620 萬次，而在 Alexa 排名前 10,000 名的使用 Next.js 的首頁數量也成長了 50%。

此版本由以下人士貢獻：@abotsi, @adam-cowley, @afbarbaro, @akellbl4, @AndreVarandas, @andys-github, @angeloashmore, @apuyou, @arturmuller, @AryanBeezadhur, @atcastle, @borekb, @brandonchinn178, @breyed, @brijendravarma, @ctbarna, @ctjlewis, @darshkpatel, @delbaoliveira, @destruc7i0n, @devknoll, @enesakar, @enzoferey, @euess, @fabb, @gnbaron, @hiro0218, @housseindjirdeh, @huozhi, @ijjk, @JacobLey, @jameshoward, @jamsinclair, @janicklas-ralph, @jarvelov, @javivelasco, @jaybekster, @JeffersonBledsoe, @jflayhart, @johnrackles, @jviide, @karlsander, @kasipavankumar, @kaykdm, @kdy1, @kylemh, @leerob, @LetItRock, @lsndr, @lucleray, @m-abdelwahab, @mandarons, @markkaylor, @mastoj, @michalbundyra, @michielvangendt, @Munawwar, @mvasilkov, @NickCrews, @NickKelly1, @noahweingand, @noreiller, @nyedidikeke, @omasher, @orta, @pa-rang, @padmaia, @papaponmx, @PaulvdDool, @petermekhaeil, @phocks, @pranavp10, @qwertyforce, @raon0211, @reod, @rishabhpoddar, @roim, @Ryz0nd, @sa3dany, @sachinraja, @samrobbins85, @schoenwaldnils, @schultzp2020, @sedlukha, @sergioalvz, @shibe23, @smitssjors, @sohamsshah, @sokra, @stefanprobst, @stovmascript, @stuymedova, @styfle, @tanys123, @ThangHuuVu, @theostrahlen, @thomasmarshall, @tigger9flow, @timneutkens, @Timvdv, @tmcgann, @tomchen, @UniqueNL, @Vadorequest, @vitalybaev, @yunger7, @zackdotcomputer, @zeekrey。