Back返回部落格

Next.js 12.3

Next.js 12.3 帶來了 TypeScript 自動安裝、改進的快速刷新 (Fast Refresh)、穩定的新版圖片元件 (Image Component) 等新功能！

我們在 Next.js 12.3 中帶來了一些提升開發體驗的改進：

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

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

Next.js 大會

誠摯邀請您參加 10 月 25 日的全球 Next.js 社群大會。為慶祝 Next.js 六週年，我們將介紹：

  • 利用 React 伺服器元件 (Server Components)、串流 (Streaming) 和 Suspense 的新功能
  • 讓開發者更容易優化和擴展應用程式的慣例
  • 使本地開發和生產版本更快的開源工具

領取免費門票 了解 Next.js 和 React 的未來發展，並關注 @nextjs 獲取最新消息。我們同時也在徵求社群演講。提交演講提案 分享您使用 Next.js 建構的故事。

TypeScript 自動安裝

Next.js 內建支援自動配置 TypeScript。以往在現有專案中加入 TypeScript 需要手動安裝必要的相依套件。

此版本中，Next.js 會自動偵測專案中新增的 TypeScript 檔案，安裝必要的相依套件並新增 tsconfig.json 檔案。此功能在執行 next dev 和 next build 時皆有效。

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

改進的快速刷新

快速迭代對本地開發工作流程至關重要。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 中，我們分享了一個實驗性預覽版的全新圖片元件，簡化了圖片樣式設定並透過使用瀏覽器原生懶加載 (lazy loading) 提升效能。

新版圖片元件現已穩定，不再需要實驗性標記。

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

  • 新增支援 fill 佈局模式，使圖片填滿父元素
  • 改進模糊占位圖 (blur-up placeholder)，現可支援透明圖片、不再需要 <noscript>，且 next dev 與 next start 行為一致
  • 防止細微版面偏移（Chrome 以外的瀏覽器），在圖片載入時隱藏 alt 文字
  • 要求提供 alt 屬性以提升無障礙性 (accessibility)
  • 修復 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: [
      {
        // `src` 屬性的主機名稱必須以 `.example.com` 結尾，
        // 否則 API 將返回 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 中，我們作為 Next.js 編譯器 實驗性功能的一部分，引入了使用 SWC 進行程式碼壓縮的功能。早期結果顯示，使用 SWC 進行壓縮比先前使用 Terser 的版本快 7 倍。

此版本中，該功能已穩定，您可透過以下 next.config.js 選項啟用：

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

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

新版路由系統與佈局更新

今年早些時候，我們發布了 佈局 RFC，介紹了自 2016 年發布以來 Next.js 最大的更新。這些變更包括基於 React 伺服器元件 (Server Components) 建構的新路由系統。實作工作已開始，我們正朝著下一主要版本的公開測試版邁進。

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

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

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

其他改進

  • 新文件 介紹 Next.js 內建的無障礙 (accessibility) 功能
  • create-next-app 模板現在預設包含根據系統偏好自動切換的深色模式支援
  • 使用 整合 ESLint 支援 時，src/ 現在是預設的 lint 目錄
  • 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。