Next.js 11

如同我們在 Next.js Conf 所宣布的，Next.js 11 持續我們的使命，透過以下功能打造最佳開發者體驗：

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

立即執行 npm i next@latest react@latest react-dom@latest 進行更新，並參考下方的升級指南。

符合性 (Conformance)

即使擁有優秀的工具與框架的自動優化，網站擁有者與應用程式開發者仍常被要求成為使用者體驗品質（如效能、安全性與無障礙性）的專家。隨著功能增加與團隊擴張，開發者需要以不同方式思考。

透過建構如搜尋與地圖等大規模網路應用的經驗，Google 已證明框架在維持品質方面扮演關鍵角色。透過強制預設值與安全措施的系統，他們讓開發者能更專注於功能與產品。

如今，Google 的 Web Platforms 團隊已開始透過 Next.js 的符合性系統 開源他們的系統。

符合性 是一個提供精心設計解決方案與規則的系統，支援最佳載入與核心網頁指標，未來還將加入對安全性與無障礙性等其他品質面向的支援。這些解決方案讓您的團隊無需記憶所有最佳載入效能的規則，同時仍能為應用程式做出正確選擇。

除了許多基於效能研究的基礎優化外，Next.js 11 現在預設支援 ESLint，讓開發過程中更容易發現框架特定問題，並為團隊設定最佳實踐指南。

要開始使用 ESLint，請在升級至 Next.js 11 後執行 npx next lint。ESLint 整合適用於新舊 Next.js 應用程式，提供一系列新規則幫助開發者建構更好的應用程式。

$ npx next lint
我們已為您建立 .eslintrc 檔案並包含基礎 Next.js ESLint 配置。
 
./pages/about.js
7:9  警告：請勿手動包含樣式表。詳見：https://nextjs.org/docs/messages/no-css-tags。  @next/next/no-css-tags
10:7  警告：禁止使用外部同步腳本。詳見：https://nextjs.org/docs/messages/no-sync-scripts。  @next/next/no-sync-scripts
 
./pages/index.js
4:10  警告：請勿使用 HTML <a> 標籤導向 /about/。請改用 'next/link' 中的 Link。詳見：https://nextjs.org/docs/messages/no-html-link-for-pages。  @next/next/no-html-link-for-pages
 
需要停用某些 ESLint 規則？了解更多：https://nextjs.org/docs/pages/building-your-application/configuring/eslint#disabling-rules
 
✨ 完成於 1.94 秒。

在 Google 的部落格 上了解更多關於框架符合性的資訊。

效能改進

自 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（預設）：用於可在頁面可互動後載入與執行的腳本，如標籤管理器與分析工具。這些腳本會在客戶端注入，並在水合作用後運行。
• lazyOnload：用於可等待閒置時間載入的腳本，如聊天支援與社交媒體小工具。

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

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

<Script
  src={url} // 同意管理
  strategy="beforeInteractive"
  onLoad={() => {
    // 若成功載入，則可依序載入其他腳本
  }}
/>

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

透過提供預設載入策略為 afterInteractive 的 Script 元件，開發者現在擁有更佳的性能預設值，同時仍可視需要選擇 beforeInteractive。

要了解切換預設值背後的技術選擇，請查看 RFC 與 Google Chrome 團隊關於 預載挑戰 的文件。

圖片改進

我們很興奮能分享社群最期待的兩項 next/image 元件功能，減少 累積版面位移 (CLS) 並創造更流暢的視覺體驗。

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

使用 import 關鍵字作為圖片 src，即可自動為靜態圖片定義 width 與 height。

例如，使用內建圖片元件現在更加簡單：

import Image from 'next/image';
import author from '../public/me.png';
 
export default function Home() {
  return (
    // 當將圖片作為來源導入時，
    // 您無需定義 `width` 和 `height`。
    <Image src={author} alt="作者照片" />
  );
}

圖片佔位圖

next/image 現在支援模糊佔位圖，以減輕從空白處到圖片的過渡，並減少感知載入時間，特別是對網路連線較慢的使用者。

要使用模糊佔位圖，請在圖片中加入 placeholder="blur"。

<Image src={author} alt="作者照片" placeholder="blur" />

Next.js 也支援透過提供自定義 blurDataURL 來模糊動態圖片，這由您的後端提供。例如，您可以在伺服器上生成 blurha.sh。

<Image
  src="https://nextjs.org/static/blog/next-11/learn.png"
  blurDataURL="data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWEREiMxUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
  alt="作者照片"
  placeholder="blur"
/>

Webpack 5

在 Next.js 10.2 中，我們將 webpack 5 的推出範圍擴大到所有未在 next.config.js 中自定義 webpack 配置的應用程式。如今，我們將 webpack 5 設為所有 Next.js 應用程式的預設值，這將帶來一系列功能與改進。

我們與社群密切合作，確保順利過渡至 webpack 5，超過 3,400 項現有的 Next.js 整合測試在每個拉取請求上運行，並啟用 webpack 5。

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

Create React App 遷移

在過去六個月中，我們看到越來越多的應用程式從 Create React App 遷移至 Next.js，以利用 Next.js 提供的開發者體驗與終端使用者效能改進。

為幫助開發者將應用程式轉換為 Next.js，我們在 @next/codemod 中引入了一個新工具，可自動將 Create React App 應用程式轉換為相容 Next.js 的專案。

此轉換工具會自動新增 pages/ 目錄並將 CSS 導入移至正確位置。它還會在 Next.js 中啟用 Create React App 相容模式，確保某些在 Create React App 中使用的模式能在 Next.js 中運作。

透過利用新的轉換工具，您可以逐步採用 Next.js，同時維持現有 Create React App 應用程式的功能。

要開始遷移您的 Create React App 專案，請使用以下指令：

npx @next/codemod cra-to-next

此功能目前為實驗性，請在此討論串中分享任何意見。

Next.js Live（預覽版）

Next.js Live 是我們使命的延續，不僅讓開發更快、更愉快，更重要的是讓整個組織都能參與。透過利用如 ServiceWorker、WebAssembly 和 ES Modules 等尖端技術，Next.js Live 將整個開發流程帶入網頁瀏覽器中。這開啟了如透過 URL 即時協作與分享的可能性，無需建置步驟。對開發者而言，這意味著更快的反饋循環、更少的等待建置時間，以及瀏覽器內的即時同儕編程與編輯。

要了解更多關於 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 提升效能。
• 更快的重新整理：加快 100ms 至 200ms 的重新整理速度。
• next/image 改進：支援 Apple Silicon (M1)，以及更多版面配置與載入器選項。
• Next.js Commerce Shopify 整合：為可組合的電子商務應用提供靈活的資料層。Next.js Commerce 目前支援 Shopify、BigCommerce、Saleor、Swell 與 Vendure。