跳到內容
返回部落格

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 Modules 支援

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

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

ES Modules 支援包含向後相容性，以支援先前 CommonJS 的匯入行為。在 Next.js 12 中，esmExternals: true 將成為預設值。如果您有任何改進建議，我們建議您試用新選項，並在GitHub Discussions 中留下意見反應。

採用以 Rust 為基礎的 SWC

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

作為以 SWC 取代 Babel 的一部分，我們正在將 Next.js 使用的所有自訂程式碼轉換移植到以 Rust 撰寫的 SWC 轉換，以最大化效能。例如，tree shaking getStaticProps、getStaticPaths 和 getServerSideProps 內未使用的程式碼。

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

在早期測試中，先前使用 Babel 的程式碼轉換從 ~500 毫秒降至 ~10 毫秒，而使用 Terser 的程式碼縮小從 ~250 毫秒降至 ~30 毫秒（使用 SWC）。整體而言，這讓建置速度快了兩倍。

我們很高興宣布 DongYoon Kang（SWC 的建立者）和 Maia Teegarden（Parcel 的貢獻者）已加入 Vercel 的 Next.js 團隊，致力於改善 next dev 和 next build 效能。當 SWC 採用穩定後，我們將在下一個版本中分享更多成果。

效能提升

建置和資料擷取

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

Next.js 自動 polyfill node-fetch，現在預設啟用 HTTP Keep-Alive。根據外部基準測試，這應使預先渲染速度快約 2 倍。

若要針對特定 fetch() 呼叫停用 HTTP Keep-Alive，您可以新增 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,
  },
};

Source Maps

由於 webpack 資產和 source map 處理的最佳化，在 Next.js 應用程式中包含瀏覽器 source map 現在效能成本降低約 70%，記憶體成本降低約 67%。

這僅影響在其 next.config.js 檔案中具有 productionBrowserSourceMaps: true 的 Next.js 應用程式。使用 Next.js 11.1，啟用 source map 後，建置時間僅增加 11%。

我們也與 Sentry 合作，以提升效能，使用 Sentry Next.js 外掛程式 上傳 source map。

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 能夠最佳化託管在 AWS S3 上的影像（當回應標頭為 Content-Type: application/octet-stream 時）。

在開發中延遲產生模糊佔位符

在 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（Time to Live）的組態： 您現在可以在 next.config.js 中設定 images.minimumCacheTTL，以變更最佳化影像的預設快取 TTL。如果可以，我們建議使用靜態影像 import，因為這些會自動使用最大 TTL，因為影像內容雜湊在 URL 中。

社群

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

我們很自豪地看到社群持續成長。僅在過去六個月內，我們就看到 NPM 上 Next.js 的下載量增加了 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