Next.js 9.1.7 | Next.js 框架

Next.js 9 在六 (6) 個月前發布，接著 Next.js 9.1 在三 (3) 個月前發布。

這兩個版本為 Next.js 新增了非常強大的新功能，而沒有增加我們的基準客戶端執行階段大小。

從那時起，我們一直專注於完善和改進整個框架：9.1.1、9.1.2、9.1.3、9.1.4、9.1.5、9.1.6 和 9.1.7。

讓我們深入了解這些版本改進了哪些方面！

客戶端 JavaScript 大小減少 3% - 8% 以上：我們進一步優化了應用程式輸出，使 hello world 應用程式減少了 7.5kB。更複雜的應用程式將顯示高達 8% 或更多的節省。
重新設計的生產版本建置 CLI 輸出：生產版本建置輸出現在以更容易理解的格式顯示 gzipped 檔案大小。
新的內建 Polyfill：fetch()、URL 和 Object.assign：應用程式可以在舊版瀏覽器中利用 fetch() API、URL 和 Object.assign，而無需擔心相容性問題。
優化的頁面載入：更好的 FCP 和 TTI：我們與 Google Chrome 團隊密切合作，以最大化頁面載入效能。這帶來更好的終端使用者體驗。
支援最新的 JavaScript 功能：我們致力於確保您始終可以使用最新的 JavaScript 功能，包括可選鏈結、Nullish Coalescing 和其他穩定的 ES2020 功能。
next export 應用程式的零配置部署支援：next export 驅動的應用程式現在可以零配置部署到 Vercel。
React 嚴格模式相容性和選擇加入：Next.js 的所有客戶端執行階段現在都與 React 的嚴格模式相容。我們還新增了一個配置選項，可以為您的整個應用程式啟用此模式。
針對 React 每晚建置版本進行自動化測試：Next.js 會自動針對 React 的 next channel 進行測試，確保與未來版本相容。

所有這些優點都是非破壞性的，並且完全向後相容。您只需執行以下命令即可更新

終端機

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

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

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

基本應用程式應該會看到 3-4% 的應用程式大小縮減，而更進階的應用程式可能會看到 6-8%（或更多！）的縮減！

	9.0.x	9.1.x	差異
基本應用程式	68.9kB	66.1kB	4.1% 更小

這些節省部分歸功於替換 url 套件的客戶端版本，改用基於 URL API 構建的版本。

透過為常用套件提供內建的小型 polyfill，實現了更多的大小縮減。您可以在這裡閱讀更多關於這些 polyfill 的資訊。

最後，我們優化了 JSX 輸出，這將直接關聯到您的應用程式中 JSX 的數量來引入節省。

重新設計的生產版本建置 CLI 輸出

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

新的輸出將每個頁面分類為以下其中一種

伺服器端渲染 (Server)：頁面在執行階段進行伺服器端渲染，這表示它使用 getInitialProps 或 getServerProps (提案)
自動靜態優化 (Static)：頁面在建置時渲染為靜態 HTML，並將作為靜態檔案提供 (不使用 initial props)
使用計算資料靜態產生 (SSG)：頁面在建置時產生為靜態 HTML/JSON，並將作為靜態檔案提供 (使用 getStaticProps (提案))

此外，新的輸出顯示每個頁面的 Gzipped 大小 — 這些大小不包含所有頁面共用的檔案 (單獨顯示)。

每個頁面的大小將根據其感知的使用者體驗進行顏色標示

小於 130kB：綠色 — 您的應用程式在大多數網路和裝置條件下應具有良好的效能。
介於 130kB 和 170kB 之間：黃色 — 您的應用程式在全球基準裝置 + 網路條件下，載入時間接近 5-6 秒。
超過 170kB：紅色 — 您的應用程式在相同條件下，可能需要超過 6 秒才能載入。

The New Next.js Production CLI Output — 新的 Next.js 生產版本 CLI 輸出

我們很樂意聽到您對新版建置輸出的意見回饋。

在不久的將來，Next.js 還將具有大小預算，以幫助您確保頁面在特定的大小範圍內。

新的內建 Polyfill：fetch()、URL 和 Object.assign

在檢查許多使用者的應用程式和我們的範例時，我們發現大多數應用程式都附帶一組相似的 polyfill。在某些情況下，應用程式甚至針對相同的功能具有重複的 polyfill。

為了補救這個問題，我們與 Google Chrome 團隊合作，內建了我們觀察到的三個最常見 API 的 polyfill。

使用差異載入，這些 polyfill 不會為全球 83% 的網路流量載入。這表示您的大多數使用者將不會下載與這些 polyfill 相關聯的位元組 — 它們只會在必要時下載。

此外，我們現在內建的任何知名的 polyfill 都將從您的生產版本建置中完全移除。這表示您將不會為您的其中一個依賴項意外匯入其中一個 API 的 polyfill 而付出代價。

內建 API 及其使其過時的 polyfill 清單如下

fetch() — 替換：whatwg-fetch 和 unfetch。
URL — 替換：url 套件 (Node.js API)。
Object.assign() — 替換：object-assign、object.assign 和 core-js/object/assign。

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

此變更完全是非破壞性的，並且所有 polyfill 都是使用最符合規範的版本製作的。結果是在現代瀏覽器上，您的生產套件中 減少了最多 18kB 的 JavaScript。

優化的頁面載入：更好的 FCP 和 TTI

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

透過解決瀏覽器錯誤，CSS (如果使用) 現在正確地優先於 JavaScript。這產生更快的首次內容繪製，為您的終端使用者帶來視覺上更完整的網站。

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

此外，這些請求僅在瀏覽器閒置時間發生，從而縮短了互動時間。這是因為瀏覽器將優先處理使您的應用程式具有互動性，而不是樂觀的預先提取。

FCP/TTI Before and After Optimizations — FCP/TTI 優化前後比較

支援最新的 JavaScript 功能

Next.js 具有先進、高度優化的編譯管道，可讓您使用最新的 JavaScript 功能。我們最近引入的優化直接促成了應用程式大小的 3-8% 縮減。

可以使用這些 JavaScript 功能，而無需擔心瀏覽器相容性，因為我們會自動編譯您的程式碼以支援所有瀏覽器 (不包括生命週期結束的版本)。這包括 ES6+ 功能，例如 async/await (ES2017)、Object Rest/Spread Properties (ES2018)、Dynamic import() (ES2020) 等等！

在此版本中，我們很高興宣布支援可選鏈結 (Stage 4) 和 Nullish Coalescing (Stage 4)。

pages/index.js

function Page(props) {
  return (
    <p>{props?.deeply?.nested?.value}</p>
    /* ⬆ If deeply.nested.value is not available it won't render */
  );
}
 
export default Page;

可選鏈結運算子 (?.)

pages/index.js

function Page(props) {
  return (
    <p>{props.something ?? 'Default value'}</p>
    /* ⬆ results in "Default value" */
  );
}
 
export default Page;

Nullish Coalescing 運算子 (??)

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

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

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

在 Vercel 上使用 Next.js 的 export-mode，就像在 package.json 中加入以下 build 腳本一樣簡單

package.json

{
  "scripts": {
    "build": "next build && next export"
  }
}

然後，您可以僅使用一個命令將您的 Next.js 應用程式部署到 Vercel。如果您尚未安裝 Vercel，您可以透過安裝 Vercel CLI 來完成。

終端機

now

React 嚴格模式相容性和選擇加入

完整的 Next.js 執行階段現在與嚴格模式相容。這包括更新 Next.js 的 head manager (<Head>)、next/dynamic 和其他核心功能。這表示執行階段現在利用 hooks 或已消除已棄用的生命週期，並且正在使用 React 的新 Context API。

我們還新增了一個方便的選擇加入選項，供您為應用程式啟用嚴格模式。

若要執行此操作，請在您的 next.config.js 中設定以下選項

next.config.js

module.exports = {
  reactStrictMode: true,
};

如果您或您的團隊尚未準備好在整個應用程式中使用 Strict Mode，那也沒關係！您可以透過逐頁方式逐步遷移，使用 <React.StrictMode>。

雖然非必要，Strict Mode 將在未來解鎖許多最佳化功能。因此，我們建議您盡早研究它！

針對 React Nightly Build 進行自動化測試

透過與 React 核心團隊的密切合作，我們現在每 12 小時針對 React 的 next channel 測試 Next.js。

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

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

社群

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

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

我們已經有超過 865 位獨立貢獻者。
在 GitHub 上，這個專案已被標註超過 43,700 次星號。
examples 目錄有超過 220 個範例。

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

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