跳至內容
返回部落格

2022 年 9 月 8 日，星期四

Next.js 12.3

發佈者
Balázs Orbán
Balázs Orbán@balazsorban44
DongYoon Kang
DongYoon Kang@kdy1dev
Jiachi Liu
Jiachi Liu@huozhi
JJ Kasper
JJ Kasper@_ijjk
Maia Teegarden
Maia Teegarden@padmaia
Shu Ding
Shu Ding@shuding_
Steven
Steven@styfle
Tim Neutkens
Tim Neutkens@timneutkens

我們在 Next.js 12.3 中提供了一些提升使用體驗的改進。

立即更新，執行 npm i next@latest。

宣布第三屆全球 Next.js 社群會議將於 10 月 25 日舉行。立即註冊 →

Next.js Conf

誠摯邀請您參加 10 月 25 日舉行的 Next.js 全球社群會議。在 Next.js 六週年之際，我們將推出

  • 運用 React 伺服器組件、串流和 Suspense 的新功能。
  • 讓開發者更容易優化和擴展應用程式的規範。
  • 讓本地開發和正式版建置更快的開源工具。

領取您的免費門票，一同見證 Next.js 和 React 的未來，並追蹤 @nextjs 以獲得更多即將發布的公告。我們也正在徵求社群演講。 提交演講提案 並分享您使用 Next.js 建構的成果。

TypeScript 自動安裝

Next.js 內建了自動設定 TypeScript 的支援。先前，將 TypeScript 加入現有專案需要手動安裝必要的 dependencies。

在此版本中，Next.js 會自動偵測何時將 TypeScript 檔案加入專案，安裝必要的 dependencies，並新增 tsconfig.json 檔案。這在執行 next dev 和 next build 時皆可運作。

影片展示 Next.js 自動安裝 TypeScript。

改良的快速重新整理 (Fast Refresh)

快速迭代對於您的本地開發流程至關重要。Next.js 使用 快速重新整理 (Fast Refresh) 針對您對 React 組件所做的編輯提供即時回饋。儲存後即可在瀏覽器中看到變更反映出來，而無需重新載入頁面。

在 Next.js 12.3 中，現在一些設定檔在編輯時也會熱重新載入，包括

  • .env 和 env.* 變體
  • jsconfig.json
  • tsconfig.json

現在您在變更這些設定檔時不需要重新啟動本地開發伺服器。

影片展示 Next.js 熱重新載入 .env 檔案。

圖片組件

next/future/image 元件（穩定版）

在 Next.js 12.2 中，我們分享了全新 Image 元件的實驗性預覽，它簡化了圖片樣式的設定，並透過使用原生瀏覽器的延遲載入功能提升了效能。

新的 Image 元件現在已穩定，不再需要實驗性旗標。

自上次發布以來，我們做了進一步的改進：

  • 新增了對 fill 排版模式的支援，使圖片填滿父元素。
  • 改進了模糊漸入的佔位符，使其可與透明圖片搭配使用，不再需要 <noscript>，並且 next dev 與 next start 的行為一致。
  • 透過在圖片載入時隱藏 alt 文字，防止了細微的版面偏移（Chrome 以外的瀏覽器）。
  • 為了更好的無障礙體驗，現在需要 alt 屬性。
  • 修復了在 hydration 之前發生錯誤時 onError 屬性的問題。
  • 修復了僅具有 width 或 height 屬性的靜態匯入圖片的長寬比問題。
  • 改進了使用不正確設定或配置時的錯誤訊息。

未來，我們計劃將 next/image 重新命名為 next/legacy/image，并将 next/future/image 重新命名為 next/image。這將為新的 Next.js 專案提供絕佳的體驗，而現有專案也能夠使用我們的 next/image codemod 輕鬆遷移。我們將在後續主要版本發佈前提供更多細節。

有關如何使用的更多資訊，請參閱包含遷移指南的文件。

遠端模式（穩定版）

remotePatterns 允許您在使用內建圖片優化 API 時，為遠端圖片指定萬用字元。它允許比現有的 images.domains 設定更強大的匹配功能，後者僅對網域名稱執行完全匹配。

此選項現在已穩定，可以使用以下設定選項：

next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        // The `src` property hostname must end with `.example.com`,
        // otherwise the API will respond with 400 Bad Request.
        protocol: 'https',
        hostname: '**.example.com',
      },
    ],
  },
};

停用圖片優化（穩定版）

圖片優化 API 需要伺服器依需求即時優化圖片。這在使用 next start 自託管或部署到像 Vercel 這樣的平台時非常有效。然而，這在使用 next export 時無法運作，因為它不包含用於優化圖片的伺服器。先前，您需要使用 loader 屬性設定第三方圖片優化供應商，但現在您可以使用 next.config.js 完全停用所有 next/image 執行個體的圖片優化功能。

這個先前處於實驗階段的選項現在已穩定，可以搭配以下設定選項使用：

next.config.js
module.exports = {
  images: {
    unoptimized: true,
  },
};

SWC 壓縮器（穩定版）

在 Next.js 12 中，我們引進了使用 SWC 進行程式碼壓縮的功能，作為 Next.js 編譯器實驗性功能的一部分。早期結果顯示，使用 SWC 進行壓縮比先前使用 Terser 的版本快 7 倍。

在此版本中，此功能已穩定，您可以使用以下 next.config.js 選項啟用它：

next.config.js
module.exports = {
  swcMinify: true,
};

我們計劃在下一個主要版本中將 SWC 壓縮器設為預設值。

新的路由器和佈局更新

今年稍早，我們發布了 佈局 RFC，其中介紹了 Next.js 自 2016 年發布以來最大的更新。這些變更包括基於 React 伺服器元件構建的新路由器。實作工作已經開始，我們正努力在下一個主要版本中推出公開測試版。

今天，我們將分享更多關於即將推出的功能的資訊，包括：

  • 路由群組：用於將路由排除在佈局之外，並在不影響網址路徑的情況下組織路由。
  • 即時載入狀態：使用 Suspense 構建的新檔案慣例，可輕鬆新增載入 UI。
  • 錯誤處理：新的檔案慣例，可輕鬆新增巢狀錯誤邊界和錯誤介面。
  • 樣板：新的檔案慣例，可新增共用 UI，建立不同的實例且不共享狀態。
  • 攔截路由、平行路由 和 條件式路由：允許您實作進階路由模式的新慣例。

此外，在另一個 RFC 中，我們正在探索在新的 app 目錄中新增對全域 CSS 導入的支援。這將允許您使用導入自身 .css 檔案的套件，而無需額外設定。

在佈局 RFC 中閱讀更多關於這些新功能的資訊。

其他改進

  • 新增文件說明 Next.js 的內建無障礙功能。
  • create-next-app 樣板現在會使用您的系統偏好設定自動包含深色模式支援。
  • 當使用整合的 ESLint 支援時，src/ 現在是預設的程式碼檢查目錄。
  • next.config.js 現在包含使用 ajv 進行的結構描述驗證，有助於防止設定選項的誤用。
  • next.config.js 現在有一個實驗性的設定標誌 fallbackNodePolyfills: false，用於防止 Next.js 為瀏覽器填充 Node.js API（這會導致捆綁包大小增加）。此選項將導致 Next.js 顯示一個建置時錯誤，顯示不必要的導入來源。

社群

Next.js 是超過 2,000 位個別開發者、Google Chrome 和 Meta 等產業合作夥伴，以及我們在 Vercel 的核心團隊共同努力的成果。

此版本由以下人士貢獻：@pthomas931, @madmed88, @sanjaiyan-dev, @balazsorban44, @DonghyukJacobJang, @chaiwattsw, @styfle, @dunglas, @ahkhanjani, @promer94, @terrierscript, @shawncal, @insik-han, @QuiiBz, @ykzts, @JoshuaKGoldberg, @lucasassisrosa, @dikwickley, @Brooooooklyn, @sicarius97, @FourwingsY, @manovotny, @SukkaW, @pepoeverton, @jdeniau, @sumiren, @anthonyshew, @pekarja5, @huozhi, @leerob, @fediev, @atcastle, @shuding, @feugy, @jonohewitt, @zakiego, @Schniz, @timneutkens, @wyattjoh, @MaedahBatool, @X7Becka, @nnnnoel, @dcdev67, @alvinometric, @timothympace, @jeferson-sb, @ijjk, @theMosaad, @Yuddomack, @msquitieri, @andreizanik, @nix6839, @thomasballinger, @ziishaned, @xyeres, @nyedidikeke, @maxproske, @sokra, @titusdmoore, @thebergamo, @fikrikarim, @Kikobeats, @clearlyTHUYDOAN, @nasso, @qutek, @kdy1, @kyliau, @housseindjirdeh, @barissayil, @seveibar, @Jessidhia, @santidalmasso, @JohnDaly, @Nikhilnama18, @mduleone, @colinhacks, @ductnn, @josh, @hiro0218, @eltociear, @kwonoj, @valcosmos, @mihaic195, @stefanprobst, @KATT, @thiagomorales, @danielcavanagh, @steven-tey, @hellomhc, @trevor-fauna, @nguyenyou, @eminvergil, @lobsterkatie, @dorian-davis, @sambecker, @isaac-martin, @lfades, @amorimr, @javivelasco, @mongolyy, @Thisen, @zorrolisto, @ethomson, @padmaia, @thisisjofrank, @dominiksipowicz, @awareness481, @pakaponk, @apledger, @longzheng, @tknickman, @rbrcsk, @emersonlaurentino, @carstenlebek, @edusig, @riccardogiorato, @hanneslund, @ryanhaticus, @j-mendez, @armandabric, @WinmezzZ, @andershagbard, @dammy001, @MarDi66, @okmttdhr, @rishabhpoddar, @marjorg, @dustinsgoodman, 以及 @zanechua。