Next.js 12.3 | Next.js 框架

我們在 Next.js 12.3 中推出了一些提升開發體驗的改進。

改進的 Fast Refresh： .env、jsconfig.json 和 tsconfig.json 檔案現在支援熱重載。
TypeScript 自動安裝： 新增 .ts 檔案以自動設定 TypeScript 並安裝依賴套件。
Image Component： next/future/image 現在已穩定。
SWC Minifier： 使用 Next.js 編譯器的壓縮功能現在已穩定。
全新路由器 + 版面配置更新： 實作已開始，並說明了新功能。

今天就執行 npm i next@latest 來更新。

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

Next.js Conf

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

運用 React Server Components、Streaming 和 Suspense 的功能。
讓開發人員更容易最佳化和擴展應用程式的慣例。
使本地開發和生產建置更快速的開源工具。

領取您的免費門票並了解 Next.js 和 React 的未來發展，並追蹤 @nextjs 以獲取更多即將發布的公告。我們也在徵集社群演講。提交演講提案並分享您使用 Next.js 建構的故事。

TypeScript 自動安裝

Next.js 內建支援自動設定 TypeScript。先前，將 TypeScript 新增至現有專案需要手動安裝必要的依賴套件。

在此版本中，當 TypeScript 檔案新增至專案時，Next.js 會自動偵測、安裝必要的依賴套件，並新增 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 檔案。

Image Component

`next/future/image` 元件（已穩定）

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

全新 Image component 現在已穩定，不再需要實驗性標記。

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

新增對 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 輕鬆遷移。我們將在下一個主要版本發布前提供更多詳細資訊。

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

Remote Patterns（已穩定）

當使用內建的 Image Optimization API 時，remotePatterns 允許您為遠端圖片指定萬用字元。它允許比現有的 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',
      },
    ],
  },
};

Image Optimization API 需要伺服器在圖片被請求時按需最佳化圖片。當使用 next start 自行託管或部署到 Vercel 等平台時，這非常有效。但是，這不適用於 next export，因為它不包含用於最佳化圖片的伺服器。先前，您需要使用 loader 屬性組態第三方 Image Optimization 提供商，但現在您可以為所有 next/image 實例使用 next.config.js 完全停用 Image Optimization。

此先前實驗性的選項現在已穩定，可以與以下組態選項一起使用

next.config.js

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

SWC Minifier（已穩定）

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

在此版本中，此功能已穩定，您可以使用以下 next.config.js 選項選擇加入。

next.config.js

module.exports = {
  swcMinify: true,
};

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

全新路由器和版面配置更新

今年稍早，我們發布了 Layouts RFC，它引入了自 2016 年發布以來 Next.js 最大的更新。這些變更包括建立在 React Server Components 之上的全新路由器。實作工作已經開始，我們正朝著在下一個主要版本中發布公開測試版而努力。

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

Route Groups：用於使路由退出版面配置，並在不影響 URL 路徑的情況下組織路由。
Instant Loading States：新的檔案慣例，可輕鬆新增載入 UI，並使用 Suspense 建構。
Error Handling：新的檔案慣例，可輕鬆新增巢狀 Error Boundaries 和錯誤 UI。
Templates：新的檔案慣例，用於新增建立不同實例且不共享狀態的共享 UI。
Intercepting Routes、 Parallel Routes 和 Conditional Routes：允許您實作進階路由模式的新慣例。

此外，在另一個 RFC 中，我們正在探索在新 app 目錄中新增對 Global CSS Imports 的支援。這將允許您使用匯入它們自己的 .css 檔案的套件，而無需額外組態。

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

其他改進

關於 Next.js 內建可訪問性功能的新文件。
create-next-app 範本現在自動包含暗黑模式支援，並使用您的系統偏好設定。
當使用整合的 ESLint 支援時，src/ 現在是預設的 linting 目錄。
next.config.js 現在包含使用 ajv 進行的架構驗證，有助於防止濫用組態選項。
next.config.js 現在有一個實驗性組態標記 fallbackNodePolyfills: false，以防止 Next.js 為瀏覽器 polyfill Node.js API（這會導致 bundle 大小增加）。此選項將導致 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。