致力於帶給開發者最佳體驗，Next.js 11 版本發佈！

昨晚 next.js.cons 召開 ，會議發佈了 next.js 11 版本以及 next.js Live，來看看重要內容！

新特性：

• Conformance：提供精心製做的解決方案以支持用戶最佳體驗的系統。
• 性能改進：進一步優化以改善冷啓動時間，以便您能夠更快地開始編碼。
• next/script：自動優先加載第三方腳本以提升性能。
• next/image：減小布局移位，經過自動尺寸檢測和支持模糊佔位符創造更流暢的視覺體驗。
• Webpack 5：如今默認爲全部 Next.js 應用程序啓用，這能夠爲全部 Next.js 開發人員帶來這些好處。
• 建立反應應用程序遷移（實驗）：自動轉換建立反應應用程序以兼容 Next.js。
• Next.js Live（預覽版）：與您的團隊實時在瀏覽器中編寫代碼。

經過運行並參考下面的遷移指南當即更新。

https://nextjs.org/blog/next-...

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

Conformance

即便有強大的工具和框架中的自動優化，網站全部者和應用程序開發人員也常常被要求成爲 UX 質量主題的專家，例如性能、安全性和可訪問性。隨着功能的添加和團隊的擴展，開發人員須要以不一樣的方式思考。

經過他們致力於構建大型 Web 應用程序（如搜索和地圖），Google 已經證實，隨着團隊和應用程序的擴展，框架能夠在保持質量方面發揮關鍵做用。經過利用強大的默認和保護系統，它們使開發人員可以更多地關注功能和產品。

今天，Google 的網絡平臺團隊已經開始使用 Conformance for Next.js 來開源他們的系統。

Conformance 是一個系統，它提供精心設計的解決方案和規則以支持最佳加載和 Core Web Vitals，並進一步添加支持其餘質量方面，如安全性和可訪問性。這些解決方案使您的團隊無需記住全部最新規則以得到最佳加載性能，同時仍然讓您可以靈活地爲您的應用程序作出正確的選擇。

除了由性能研究支持的許多基礎優化外，Next.js 11 如今開箱即用地支持 ESLint，以便在開發過程當中更輕鬆地捕獲特定於框架的問題，併爲您的團隊設置指導方針，以確保即便在擴展時也能得到最佳實踐。

要開始使用 ESLint，請在升級到 Next.js 11 後運行。ESLint 集成適用於新的和現有的 Next.js 應用程序，提供一組新規則來幫助開發人員構建更好的應用程序。

npx next lint

$ 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.org/docs/messages/no-css-tags.  @next/next/no-css-tags
10:7  Warning: External synchronous scripts are forbidden. See: https://nextjs.org/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.org/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.org/docs/basic-features/eslint#disabling-rules

✨  Done in 1.94s.

性能優化

從 Next.js 10 開始，咱們一直專一於改善 Next.js 的開發者體驗。在 10.1 和 10.2 中，咱們將啓動時間縮短了 24%，並經過 React Fast Refresh 將更改的處理時間再減小了 40%。僅僅經過保持 Next.js 更新，您就已經得到了這些驚人的速度改進。

Next.js 11 包含對 Babel 的另外一項優化，以進一步縮短啓動時間。咱們爲 webpack 建立了一個全新的 Babel 加載器實現，優化了加載並添加了內存配置緩存層。實際上，這對開發人員來講意味着沒有變化，但最終將意味着更快的開發體驗。

腳本優化

新的 Next.js Script Component 是一項基礎優化，讓開發者能夠設置第三方腳本的加載優先級，以節省開發者時間並提升加載性能。

網站一般須要第三方來進行分析、廣告、客戶支持小部件和贊成管理等工做。可是，這些腳本每每會影響加載性能，而且會拖累用戶體驗。開發人員經常難以決定將它們放置在應用程序中的哪一個位置以實現最佳加載。

更新後您能夠定義屬性，Next.js 將自動優先考慮它們以提升加載性能：next/scriptstrategy

• beforeInteractive：用於在頁面交互以前須要獲取和執行的關鍵腳本，例如機器人檢測和贊成管理。這些腳本從服務器注入到初始 HTML 中，並在執行自綁定 JavaScript 以前運行。
• afterInteractive（默認）：用於能夠在頁面交互後獲取和執行的腳本，例如標籤管理器和分析。這些腳本是在客戶端注入的，將在水合後運行。
• lazyOnload對於能夠在空閒時間等待加載的腳本，例如聊天支持和社交媒體小部件。

圖像改進

咱們很高興與你們分享咱們社區對該組件最須要的兩個功能，減小累積佈局偏移帶來更流暢的視覺體驗。next/image

自動尺寸檢測（本地圖像）

使用關鍵字爲圖像自定義和爲靜態圖像.importsrcwidthheight

例如，使用內置的 Image 組件如今更加容易：

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 還經過容許您提供由後端提供的自定義來支持模糊動態圖像。例如，您能夠在服務器上生成一個 blurha.sh。blurDataURL

<Image
  src="https://nextjs.org/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 的推出擴展到全部 .js 文件中沒有自定義 webpack 配置的應用程序。今天，咱們將 webpack 5 設爲全部 Next.js 應用程序的默認版本，它將提供各類功能和改進。next.config.js

咱們與社區密切合做，以確保順利過渡到 webpack 5，在啓用 webpack 5 的每一個拉取請求上運行超過 3,400 個現有的 Next.js 集成測試。

若是您的應用程序具備自定義 webpack 配置，咱們建議您遵循 webpack 5 的升級文檔。若是您遇到任何問題，請與咱們分享反饋。

CRA 遷移

在過去的六個月中，咱們看到愈來愈多的應用程序從 Create React App 遷移到 Next.js，以利用 Next.js 提供的許多開發人員體驗和最終用戶性能改進。

爲了幫助開發人員將他們的應用程序轉換爲 Next.js，咱們引入了一個新工具來自動將 Create React App 應用程序轉換爲 Next.js 兼容。@next/codemod

轉換會自動添加一個目錄並將 CSS 導入移動到正確的位置。它還將在 Next.js 中啓用 Create React App 兼容模式，以確保 Create React App 中使用的某些模式與 Next.js.pages/

經過利用新的轉換，您能夠逐步採用 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 將整個開發過程放在 Web 瀏覽器中。這開闢了諸如使用 URL 即時協做和共享之類的可能性，而無需構建步驟。對於開發人員來講，這意味着更快的反饋循環、更少的等待構建的時間以及瀏覽器中的實時對等編程和編輯。