Next.js 11

如同我們在 Next.js 研討會上所宣布的，我們持續致力於打造最佳開發體驗的使命，Next.js 11 帶來了：

一致性：一個提供精心設計的解決方案以支援最佳使用者體驗的系統。
效能提升：進一步最佳化以縮短冷啟動時間，讓您可以更快開始編碼。
next/script：自動優先載入第三方腳本以提升效能。
next/image：透過自動尺寸偵測和漸進式載入佔位圖支援，減少版面配置偏移並創造更流暢的視覺體驗。
Webpack 5：現在預設為所有 Next.js 應用程式啟用，將這些優點帶給所有 Next.js 開發者。
Create React App 遷移（實驗性）：自動將 Create React App 轉換為與 Next.js 相容。
Next.js Live（預覽版）：與您的團隊在瀏覽器中進行即時編碼。

立即更新，執行 npm i next@latest react@latest react-dom@latest 並參考下面的遷移指南。

效能提升

自 Next.js 10 起，我們一直致力於進一步提升 Next.js 的開發體驗。在 10.1 和 10.2 版本中，我們將啟動時間縮短了高達 24%，並透過 React Fast Refresh 將處理變更的時間再縮短了 40%。只要保持 Next.js 更新，您就能享受到這些驚人的速度提升。

Next.js 11 包含了另一項針對 Babel 的優化，可進一步縮短啟動時間。我們為 webpack 建立了全新的 Babel loader 實作，優化了載入並新增了記憶體內的設定快取層。實際應用上，這表示開發者無需進行任何變更，但最終將帶來更快的開發體驗。

腳本優化

全新的 Next.js Script 元件是一項基礎優化，可讓開發者設定第三方腳本的載入優先順序，以節省開發時間並提升載入效能。

網站通常需要第三方服務，例如分析、廣告、客戶支援小工具和同意管理。然而，這些腳本往往會影響載入效能，並拖慢使用者體驗。開發者經常難以決定將它們放置在應用程式的哪個位置才能達到最佳載入效果。

使用 next/script，您可以定義 strategy 屬性，Next.js 將自動排定它們的優先順序以提升載入效能。

beforeInteractive：適用於需要在頁面互動之前擷取和執行的關鍵腳本，例如機器人偵測和同意管理。這些腳本會從伺服器注入到初始 HTML 中，並在自行打包的 JavaScript 執行之前運行。
afterInteractive（預設值）：適用於可在頁面互動之後擷取和執行的腳本，例如標籤管理工具和分析工具。這些腳本會在用戶端注入，並在水合作用（hydration）之後運行。
lazyOnload：適用於可以等到閒置時間再載入的腳本，例如線上客服和社群媒體小工具。

<Script
  src={url}
  strategy="beforeInteractive" // lazyOnload, afterInteractive
/>

您也可以在載入後執行程式碼。例如，您可以等到使用者回應同意後再執行程式碼。

<Script
  src={url} // consent mangagement
  strategy="beforeInteractive"
  onLoad={() => {
    // If loaded successfully, then you can load other scripts in sequence
  }}
/>

我們也在 Next.js 11 中將預設的腳本載入體驗從預先載入和 async 改為 defer。第三方腳本通常會與優先順序較高的資源（例如 CSS、字型和圖片）競爭。維持這些資源以及其他腳本的正確順序對開發者來說是不必要的負擔。

現在，開發者可以透過提供預設載入策略為 afterInteractive 的 Script 元件，獲得更佳的預設效能，並且仍然可以根據需要選擇 beforeInteractive。

欲深入了解切換預設值背後的技術考量，請參考 RFC 以及 Google Chrome 團隊提供的預載入的挑戰。

圖片改良

我們很高興分享社群中兩個呼聲最高的 next/image 元件功能：減少累積版面配置移位 (CLS) 並創造更流暢的視覺體驗。

自動尺寸偵測（本地圖片）

使用 import 關鍵字導入圖片 src，即可自動定義靜態圖片的 width 和 height。

例如，現在使用內建的 Image 元件變得更加簡單

pages/index.js

import Image from 'next/image';
import author from '../public/me.png';
 
export default function Home() {
  return (
    // When importing the image as the source, you
    // don't need to define `width` and `height`.
    <Image src={author} alt="Picture of the author" />
  );
}

圖片預留位置

next/image 現在支援模糊漸入的預留位置，讓空白到圖片顯示的過渡更為順暢，並減少感知載入時間，特別是對於網路連線速度較慢的使用者。

要使用模糊預留位置，請在您的圖片中加入 placeholder="blur"。

<Image src={author} alt="Picture of the author" placeholder="blur" />

Next.js 也支援動態圖片模糊化，允許您提供自訂的 blurDataURL，這是由您的後端提供的。例如，您可以在伺服器上產生 blurha.sh。

<Image
  src="https://nextjs.dev.org.tw/static/images/learn.png"
  blurDataURL="data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWEREiMxUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
  alt="Picture of the author"
  placeholder="blur"
/>

Webpack 5

在 Next.js 10.2 中，我們將 webpack 5 的部署範圍擴展到所有在 next.config.js 中沒有自訂 webpack 設定的應用程式。今天，我們將 webpack 5 設為所有 Next.js 應用程式的預設設定，這將提供各種功能和改進。

我們與社群密切合作，以確保順利過渡到 webpack 5，每次提取請求在啟用 webpack 5 的情況下都會執行超過 3,400 個現有的 Next.js 整合測試。

如果您的應用程式有自訂的 webpack 設定，我們建議您遵循webpack 5 的升級文件。如果您遇到任何問題，請與我們分享您的意見。

Next.js Live 延續了我們的使命，讓開發不僅更快、更愉快，而且更重要的是，能讓整個團隊更具包容性地參與其中。藉由運用 ServiceWorker、WebAssembly 和 ES 模組等尖端技術，Next.js Live 將整個開發流程置於網路瀏覽器中。這開創了更多可能性，例如使用網址即可立即協作和分享，無需建置步驟。對於開發人員而言，這意味著更快的回饋循環、更少的建置等待時間，以及在瀏覽器內進行即時共同編程和編輯。

要進一步了解 Next.js Live 以及如何將其與 Vercel 的即時協作引擎搭配使用，請參閱文件中的Next.js Live章節。

升級指南

Next.js 11 引入了一些重大變更，但大多數使用者應該不會受到影響。這些舊有功能已以向後相容的方式維護多年，有些甚至可以追溯到 v4.0 版本。

移除這些功能是為了減小套件大小，並確保程式碼庫在未來易於維護。要進一步了解如何從版本 10 升級到 11，請參閱升級指南。

在 Next.js 11 中，最低 React 版本已更新至 17.0.2。如需更多詳細資訊，請參閱React 17 部落格文章。我們也正與 React 團隊密切合作，因為他們即將推出React 18。當使用 React 18 alpha 版本時，Next.js 11 會使用 createRoot。

社群

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

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

此版本由以下人士貢獻：@kahy9、@ljosberinn、@leerob、@kettanaito、@thomasboyt、@hussainanjar、@styfle、@devknoll、@LiuuY、@timneutkens、@housseindjirdeh、@PepijnSenders、@janicklas-ralph、@payapula、@tmtk75、@ijjk、@hiramhuang、@daku10、@atcastle、@matamatanot、@pelhage、@Lukazovic、@Mzaien、@gleich、@geshan、@Munawwar、@ykzts、@vitalybaev、@mottox2、@vvo、@chrisneven、@turneand、@d3lm、@akellbl4、@sokra、@johnjago、@alicanyildirim、@sanathusk、@valse、@samrobbins85、@SamVerschueren、@ademilter、@ctjlewis、@brandondc741、@eltociear、@martpie、@kasipavankumar、@joecohens、@alexbrazier、@jamsinclair、@fabianishere、@rokinsky、@msidqi、@rubensdemelo、@Simply007、@bradlc、@SinimaWath、@rgabs、@darshkpatel、@sumanthratna、@shuding、@prophet1996、@Joonpark13、@tremby、@stefanprobst、@dopt、@rishabhpoddar、@aydinkn、@ErfanMirzapour、@tubbo、@frontendtony、@eric-burel、@iker-barriocanal、@eps1lon、@Gigiz、@mplis、@HaNdTriX 和 @jigsawye。

以下功能在 Next.js Conf 中提及，但已透過 10.1 和 10.2 版本提前發佈。

自動網頁字型最佳化：透過內嵌字型 CSS 提升效能。
更快的重新整理：重新整理速度提升 100 毫秒到 200 毫秒。
next/image 改進：支援 Apple Silicon (M1)，以及更多版面配置和載入器選項。
Next.js Commerce Shopify 整合：適用於可組合式電子商務應用程式的彈性資料層。Next.js Commerce 目前支援 Shopify、BigCommerce、Saleor、Swell 和 Vendure。

規範一致性