Next.js 11 | Next.js 框架

如同我們在 Next.js Conf 上宣布的，我們持續致力於創造最佳開發者體驗，並推出 Next.js 11，其特色包含：

一致性 (Conformance)：一個提供精心設計的解決方案系統，以支援最佳使用者體驗 (UX)。
效能提升 (Improved Performance)：進一步最佳化以改善冷啟動時間，讓您可以更快開始編碼。
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 更新，並參考下方的遷移指南。

一致性 (Conformance)

即使有了出色的工具和框架中的自動最佳化功能，網站所有者和應用程式開發人員仍然經常被要求成為使用者體驗品質主題的專家，例如效能、安全性及可訪問性。隨著功能的增加和團隊規模的擴大，開發人員需要以不同的方式思考。

透過他們建立大規模網路應用程式 (如搜尋和地圖) 的工作經驗，Google 已證明框架可以在維護團隊和應用程式規模的品質方面發揮關鍵作用。透過利用強大的預設和安全措施系統，他們使開發人員能夠更專注於功能和產品。

今天，Google 的 Web Platforms 團隊已開始開放原始碼他們的系統，推出 Next.js 的一致性 (Conformance)。

一致性 (Conformance) 是一個系統，提供精心設計的解決方案和規則，以支援最佳載入和核心網路指標 (Core Web Vitals)，未來將加入更多功能以支援其他品質方面，例如安全性及可訪問性。這些解決方案讓您的團隊無需記住所有最新的最佳載入效能規則，同時仍然讓您能夠彈性地為您的應用程式做出正確的選擇。

除了許多效能研究支援的基礎最佳化之外，Next.js 11 現在也開箱即用支援 ESLint，讓您更容易在開發過程中發現框架特定的問題，並為您的團隊設定指南，以確保即使在擴展規模時也能遵循最佳實務。

若要開始使用 ESLint，請在升級至 Next.js 11 後執行 npx next lint。ESLint 整合適用於新的和現有的 Next.js 應用程式，提供一組新的規則來協助開發人員建置更優質的應用程式。

$ npx next lint
We created the .eslintrc file for you and included the base Next.js ESLint configuration.

./pages/about.js
7:9  Warning: Do not include stylesheets manually. See: https://nextjs.dev.org.tw/docs/messages/no-css-tags.  @next/next/no-css-tags
10:7  Warning: External synchronous scripts are forbidden. See: https://nextjs.dev.org.tw/docs/messages/no-sync-scripts.  @next/next/no-sync-scripts

./pages/index.js
4:10  Warning: Do not use the HTML <a> tag to navigate to /about/. Use Link from 'next/link' instead. See: https://nextjs.dev.org.tw/docs/messages/no-html-link-for-pages.  @next/next/no-html-link-for-pages

Need to disable some ESLint rules? Learn more here: https://nextjs.dev.org.tw/docs/pages/building-your-application/configuring/eslint#disabling-rules

✨  Done in 1.94s.

在 Google 部落格上了解更多關於框架一致性 (Conformance) 的資訊。

效能提升 (Improved Performance)

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

Next.js 11 包含另一個 Babel 最佳化，以進一步縮短啟動時間。我們為 webpack 建立了一個全新的 Babel loader 實作，最佳化載入並新增了記憶體內組態快取層。實際上，這意味著 開發人員無需進行任何變更，但最終將帶來更快的開發體驗。

腳本最佳化 (Script Optimization)

全新的 Next.js Script Component 是一項基礎最佳化功能，讓開發人員能夠設定第三方腳本的載入優先順序，以節省開發人員時間並提升載入效能。

網站通常需要第三方服務來處理分析、廣告、客戶支援小工具和同意聲明管理等事項。然而，這些腳本往往會對載入效能造成負擔，並拖慢使用者體驗。開發人員經常難以決定將它們放置在應用程式中的哪個位置才能獲得最佳載入效果。

透過 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 Component，開發人員現在擁有更佳的預設設定以獲得最佳效能，並且仍然可以根據需要選擇 beforeInteractive。

若要深入了解切換預設設定背後的技術考量，請查看 RFC 和 Google Chrome 團隊關於預先載入的挑戰。

影像改善 (Image Improvements)

我們很高興分享社群最要求的兩項 next/image 元件功能，以減少累計版面配置位移 (Cumulative Layout Shift) 並創造更流暢的視覺體驗。

自動尺寸偵測 (本機影像) (Automatic Size Detection (Local Images))

針對影像 src 使用 import 關鍵字，以自動定義靜態影像的 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" />
  );
}

影像佔位符 (Image Placeholders)

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/blog/next-11/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，超過 3,400 個現有的 Next.js 整合測試在每次啟用 webpack 5 的 pull request 上執行。

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

Next.js Live (預覽版發布) (Next.js Live (Preview Release))

Next.js Live 是我們使命的延續，不僅要讓開發更快、更愉快，更重要的是要讓 整個組織更具包容性。透過利用 ServiceWorker、WebAssembly 和 ES Modules 等尖端技術，Next.js Live 將整個開發過程都放在網路瀏覽器中。這開啟了各種可能性，例如透過 URL 即時協作和共享，無需建置步驟。對於開發人員來說，這意味著更快的意見回饋迴圈、更少的建置等待時間，以及在瀏覽器內進行即時同儕程式設計和編輯。

若要深入了解 Next.js Live 以及如何將其與 Vercel 的即時協作引擎配對，請參閱文件中的 Next.js Live 章節。

升級指南 (Upgrade Guide)

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。

社群 (Community)

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 版本提前發布

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