Back返回部落格

Next.js 9.1.7

Next.js 9.1.7 在穩固的基礎上持續改進，強化了企業級應用的 9.1 正式版。升級後可獲得更小的客戶端 JavaScript 套件、 重新設計的 CLI 輸出、更快的 FCP/TTI 指標，以及更多優化！

Next.js 9 於六個月前發布，隨後在三個月前推出了 Next.js 9.1。

這兩次版本更新為 Next.js 加入了強大的新功能，同時沒有增加基礎客戶端執行環境的大小。

此後，我們專注於整體框架的精煉與改進：包括 9.1.1、9.1.2、9.1.3、9.1.4、9.1.5、9.1.6 以及 9.1.7。

讓我們深入了解這些版本帶來的改進！

所有這些改進都是非破壞性且完全向後兼容的。您只需執行以下指令即可更新：

Terminal
npm i next@latest react@latest react-dom@latest

客戶端 JavaScript 大小減少 3% - 8%+

與 Google Chrome 團隊合作後，所有 Next.js 應用都將受益於 7.5kB 或更多 的大小減縮。

基礎應用應可看到 3-4% 的體積縮減，更進階的應用可能減少 6-8%（或更多）！

9.0.x9.1.x差異
基礎應用68.9kB66.1kB4.1% 更小

這些節省部分歸功於 替換 url 套件的客戶端版本 為基於 URL API 的實作。

更多體積優化來自為常用套件提供內建的小型 polyfills。您可 在此閱讀更多關於這些 polyfills 的資訊。

最後，我們優化了 JSX 輸出，這將根據您應用中 JSX 的數量帶來相應的節省。

重新設計的生產環境建置 CLI 輸出

CLI 的生產環境建置輸出已重新設計以提高清晰度。由於 Next.js 是混合式應用框架，每個頁面可能有不同的特性。

新輸出將每個頁面分類為以下之一：

  • 伺服器端渲染 (Server)：頁面在執行時進行伺服器端渲染，意味著它使用 getInitialProps 或 getServerProps (提案)
  • 自動靜態優化 (Static)：頁面在建置時被渲染為靜態 HTML，並將作為靜態檔案提供（不使用初始 props）
  • 使用計算資料靜態生成 (SSG)：頁面在建置時生成為靜態 HTML/JSON，並將作為靜態檔案提供（使用 getStaticProps (提案)）

此外，新輸出顯示每個頁面的 Gzip 壓縮大小——這些大小排除了所有頁面共享的檔案（另行顯示）。

每個頁面的大小將根據其預期使用者體驗進行顏色標記：

  • 小於 130kB：綠色 —— 您的應用在大多數網路和裝置條件下都應表現良好。
  • 130kB 至 170kB 之間：黃色 —— 您的應用在 全球基準裝置 + 網路條件 下接近 5-6 秒載入時間。
  • 大於 170kB：紅色 —— 您的應用在 相同條件 下可能需超過 6 秒載入。

新版 Next.js 生產環境 CLI 輸出

新版 Next.js 生產環境 CLI 輸出

我們期待聽到您對新建置輸出的反饋。

在不久的將來，Next.js 還將加入大小預算功能，幫助您確保頁面保持在特定大小範圍內。

新增內建 Polyfills：fetch()、URL 和 Object.assign

在檢視許多使用者應用和我們的範例後，我們發現大多數都附帶了相似的 polyfills 集合。某些情況下，應用甚至對同一功能重複載入多個 polyfills。

為解決此問題，我們與 Google Chrome 團隊合作，為觀察到的三個最常用 API 內建了 polyfills。

透過差異化載入，這些 polyfills 不會為全球 83% 的網路流量載入。這意味著大多數使用者不會下載這些 polyfills 相關的位元組——它們只會在必要時被下載。

此外，任何我們現在已內建的知名 polyfills 將完全從您的生產環境建置中消除。這意味著您不會因為某個依賴項無意中導入這些 API 的 polyfill 而付出代價。

內建 API 及其取代的 polyfills 列表如下：

如果您在伺服器端使用 fetch()，仍需要導入 isomorphic-fetch 或 isomorphic-unfetch。

此變更是完全非破壞性的，所有 polyfills 都使用最符合規範的可用版本實作。結果是在現代瀏覽器上可從您的生產套件中消除最多 18kB 的 JavaScript。

優化頁面載入：改善 FCP 和 TTI

Next.js 優化了其預載入實作，以減少 FCP 和整體 TTI。

透過解決瀏覽器錯誤，CSS（當使用時）現在正確優先於 JavaScript。這導致更快的首次內容繪製 (First Contentful Paint)，為您的終端使用者帶來視覺上更快速的網站完成體驗。

此外，我們優化了頁面預取以使用較低優先級的網路請求。

這些請求僅在瀏覽器空閒時間發生，從而實現更快的可互動時間 (Time-to-Interactive)。這是因為瀏覽器會優先使您的應用可互動，而非樂觀預取。

FCP/TTI 優化前後對比

FCP/TTI 優化前後對比

支援最新 JavaScript 功能

Next.js 擁有先進、高度優化的編譯管道，讓您能使用最新的 JavaScript 功能。我們最近引入的優化直接貢獻了 3-8% 的應用大小減少。

這些 JavaScript 功能可在無需擔心瀏覽器相容性的情況下使用，因為我們會自動將您的程式碼編譯以支援所有瀏覽器（排除已終止支援的版本）。這包括 ES6+ 功能，如 async/await (ES2017)、物件其餘/展開屬性 (ES2018)、動態 import() (ES2020) 等！

在此版本中，我們很高興宣布支援 Optional Chaining (Stage 4) 和 Nullish Coalescing (Stage 4)。

pages/index.js
function Page(props) {
  return (
    <p>{props?.deeply?.nested?.value}</p>
    /* ⬆ 如果 deeply.nested.value 不可用，它將不會渲染 */
  );
}
 
export default Page;

Optional chaining 運算子 (?.)

pages/index.js
function Page(props) {
  return (
    <p>{props.something ?? '預設值'}</p>
    /* ⬆ 結果為 "預設值" */
  );
}
 
export default Page;

Nullish coalescing 運算子 (??)

未來，我們計劃透過自動 module / nomodule 建置 輸出更優化的套件。

next export 應用程式的零配置部署支援

Next.js 的 next export 指令現在可與 Vercel 的 零配置 開箱即用。在此變更前，使用 next export 的使用者需要建立自訂的 now.json。

在 Vercel 上使用 Next.js 的 export 模式非常簡單，只需在 package.json 中有以下 build 腳本：

package.json
{
  "scripts": {
    "build": "next build && next export"
  }
}

然後，您只需 單一指令 即可將 Next.js 應用部署至 Vercel。如果您尚未安裝 Vercel，可透過安裝 Vercel CLI 完成。

Terminal
now

React Strict Mode 相容性與啟用選項

完整的 Next.js 執行環境現已相容 Strict Mode。這包括 Next.js 的 head 管理器 (<Head>)、next/dynamic 和其他核心功能的更新。這意味著執行環境現在使用 hooks 或已淘汰棄用的生命週期方法，並使用 React 的新 Context API。

我們也新增了方便的啟用選項，讓您為應用啟用 Strict Mode。

為此，在您的 next.config.js 中配置以下選項：

next.config.js
module.exports = {
  reactStrictMode: true,
};

如果您或您的團隊尚未準備好在整個應用中使用 Strict Mode，沒問題！您可以逐步遷移，使用 <React.StrictMode> 逐頁啟用。

雖然 非強制，但 Strict Mode 將在未來解鎖許多優化。因此，我們建議您盡早考慮採用！

針對 Nightly React 版本的自動化測試

在與 React 核心團隊的 密切合作 下，我們現在每 12 小時 測試 Next.js 與 React 的 next 頻道的相容性。

這些測試幫助確保我們為 React 的未來版本做好準備並保持相容。相容性是 Next.js 非常重視的事項，我們致力於 Next.js 的長期 API 穩定性。

此流程 已被 React 核心團隊記錄，希望 React 生態系統中的其他專案能跟進。

社群

我們對即將到來的變更感到興奮，這些變更將改善所有 Next.js 應用的體積和效能。

此外，Next.js 社群仍在擴張：

  • 我們已有超過 865 位獨立貢獻者。
  • 在 GitHub 上，專案已獲得超過 43,700 次星標。
  • 範例目錄 擁有超過 220 個範例。

Next.js 社群現有超過 13,600 名成員。加入我們！

我們感謝我們的社群及所有外部反饋和貢獻，這些幫助塑造了此版本。