2024 年 4 月 11 日，星期四

Next.js 14.2

發佈者

Delba de Oliveira@delba_oliveira

Tim Neutkens@timneutkens

Next.js 14.2 包含開發、生產和快取方面的改進。

開發用 Turbopack（候選發佈版）： next dev --turbo 已通過 99.8% 的測試。
建置與產品改進： 減少建置記憶體使用量和 CSS 優化。
快取改進： 使用 staleTimes 可設定的失效期限。
錯誤 DX 改進： 更好的 hydration 不匹配錯誤和設計更新。

立即升級或開始使用

終端機

npx create-next-app@latest

用於開發的 Turbopack（候選發佈版）

過去幾個月，我們一直致力於使用 Turbopack 改進本地開發效能。在 14.2 版中，Turbopack 候選發佈版現已可用於本地開發。

99.8% 的整合測試現在已通過。
我們已驗證 Next.js 應用程式中使用的前 300 個 npm 套件可以使用 Turbopack 編譯。
所有Next.js 範例都可與 Turbopack 搭配使用。
我們已整合Lightning CSS，這是一個以 Rust 編寫的快速 CSS 打包器和壓縮器。

我們一直在 Vercel 的應用程式中廣泛地試用 Turbopack。例如，對於大型 Next.js 應用程式 vercel.com，我們觀察到

本地伺服器啟動速度最高提升 76.7%。
使用快速重新整理進行程式碼更新的速度最高提升 96.3%。
在沒有快取的情況下，初始路由編譯速度最高提升 45.8%（Turbopack 尚未提供磁碟快取）。

Turbopack 仍為選用功能，您可以使用以下方式試用

終端機

next dev --turbo

我們現在將專注於改進記憶體使用量、實作永久快取和 next build --turbo。

記憶體使用量 - 我們已建置用於調查記憶體使用量的低階工具。您現在可以產生追蹤，其中包含效能指標和廣泛的記憶體使用量資訊。這些追蹤讓我們無需存取您應用程式的原始碼即可調查效能和記憶體使用量。
永久快取 - 我們也在探索最佳的架構選項，並預計在未來的版本中分享更多細節。
next build - 雖然 Turbopack 尚無法用於建置，但已有 74.7% 的測試通過。您可以在areweturboyet.com/build追蹤進度。

要查看 Turbopack 中支援和不支援的功能的清單，請參閱我們的文件。

建置與生產環境的改進

除了 Turbopack 的捆綁改進之外，我們也致力於提升所有 Next.js 應用程式（包含 Pages 和 App Router）的整體建置和生產環境效能。

Tree-shakingIcon 元件，不再包含該套件中的所有其他圖示。這可以大幅減少生產環境 JavaScript 捆綁包的大小。

在熱門函式庫（例如 react-aria-components）上測試此最佳化，最終捆綁包大小減少了 51.3%。

注意：此最佳化目前不適用於桶狀檔案 (barrel files)。在此期間，您可以使用 optimizePackageImports 設定選項。
next.config.ts
module.exports = {
  experimental: {
    optimizePackageImports: ['package-name'],
  },
};

建置記憶體使用量了解更多資訊。

CSS

base-button.tsx

import styles from './base-button.module.css';
 
export function BaseButton() {
  return <button className={styles.primary} />;
}

page.tsx

import { BaseButton } from './base-button';
import styles from './page.module.css';
 
export function Page() {
  return <BaseButton className={styles.primary} />;
}

為了維持正確的 CSS 順序，我們建議：

使用 CSS 模組，而非全域樣式。
只在單個 JS/TS 檔案中引入 CSS 模組。
如果使用全域類別名稱，也請在同一個 JS/TS 檔案中引入全域樣式。

我們預期此變更不會對大多數應用程式造成負面影響。但是，如果您在升級後看到任何非預期的樣式，請根據我們文件中的建議檢查您的 CSS 引入順序。

快取機制改善

快取機制是建構快速且可靠網頁應用程式的關鍵要素。執行變更時，使用者和開發者都期望快取能更新以反映最新的變更。我們一直在探索如何在 App Router 中改善 Next.js 的快取體驗。

`staleTimes`（實驗性）

Client-side Router Cache (客戶端路由器快取) 是一個快取層，旨在透過在客戶端快取已訪問和預取的路由來提供快速的導航體驗。

根據社群的回饋，我們新增了一個實驗性的 staleTimes 選項，允許設定客戶端路由器快取的失效期限。

預設情況下，預取的路由（使用沒有 prefetch 屬性的 <Link> 元件）會被快取 30 秒，如果 prefetch 屬性設為 true，則會快取 5 分鐘。您可以透過在 next.config.js 中定義自訂的重新驗證時間來覆寫這些預設值。

next.config.ts

const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
      static: 180,
    },
  },
};
 
module.exports = nextConfig;

staleTimes 旨在改善目前想要更精細控制快取策略的使用者體驗，但它並非完整的解決方案。在未來的版本中，我們將專注於改善整體快取語義並提供更彈性的解決方案。

在我們的文件中了解更多關於 staleTimes 的資訊。

平行路由與攔截路由

我們持續改進平行路由和攔截路由，現在更強化了與 Client-side Router Cache 的整合。

平行路由和攔截路由在使用 revalidatePath 或 revalidateTag 呼叫伺服器動作時，將會重新驗證快取並刷新可見的區塊，同時維持使用者目前的檢視畫面。
同樣地，呼叫 router.refresh 現在也能正確地刷新可見區塊，並維持目前的檢視畫面。

錯誤體驗 (DX) 的改進

在 14.1 版中，我們開始著手改善在執行 next dev 時錯誤訊息和堆疊追蹤的可讀性。這項工作持續進行到 14.2 版，現在包含了更好的錯誤訊息、針對應用程式路由器和頁面路由器的覆蓋設計改進、亮暗模式支援，以及更清晰的 dev 和 build 日誌。

例如，React hydration 錯誤是我們社群中常見的混淆來源。雖然我們進行了改進以協助使用者查明 hydration 不匹配的來源（見下方），但我們正與 React 團隊合作，以改善底層的錯誤訊息並顯示發生錯誤的檔案名稱。

改進前

An example of the Next.js error overlay before version 14.2. — 14.2 版之前的 Next.js 錯誤覆蓋範例。

改進後

An example of the Next.js error overlay after version 14.2. — 14.2 版之後的 Next.js 錯誤覆蓋範例。

React 19

二月，React 團隊宣布即將發布 React 19。為了準備 React 19，我們正致力於將最新的功能和改進整合到 Next.js 中，並計劃發布一個主要版本來協調這些變更。

像 Actions 及其相關 hooks 等新功能，這些功能從 React canary channel 開始就在 Next.js 中提供，現在將適用於所有 React 應用程式（包括僅限客戶端的應用程式）。我們很高興看到這些功能在 React 生態系統中更廣泛地被採用。

其他改進

[文件] 新增關於影片優化的說明文件 (PR)。
[文件] 新增關於 instrumentation.ts 的說明文件 (PR)
[功能] next/image 新增 overrideSrc 屬性 (PR)。
[功能] getStaticProps 新增 revalidateReason 參數 (PR)。
[改進] 重構了串流邏輯，減少了在正式環境中串流頁面的時間 (PR)。
[改進] 支援巢狀伺服器動作 (PR)。
[改進] 在產生的 Sitemap 中支援本地化 (PR)。
[改進] 開發和建置日誌的視覺改進 (PR)
[改善] Vercel 上的偏移保護已穩定。（文件）。
[改善] 使 useSelectedLayoutSegment 與 Pages Router 相容。（PR）。
[改善] 當絕對網址不需要解析時，略過 metadataBase 警告。（PR）。
[改善] 修正部署到 Vercel 後，在未啟用 JavaScript 的情況下伺服器動作無法提交的問題。（PR）
[改善] 修正如果在導航離開參考頁面後觸發伺服器動作，或在非使用中的平行路由區段內使用伺服器動作，導致在動作清單中找不到伺服器動作的錯誤。（PR）
[改善] 修正由 next/dynamic 載入的元件中的 CSS 導入問題。（PR）。
[改善] 當動畫圖片缺少 unoptimized 屬性時發出警告。（PR）。
[改善] 如果 images.loaderFile 沒有匯出預設函式，則顯示錯誤訊息。（PR）

社群

Next.js 現在每月有超過 100 萬活躍開發者。我們非常感謝社群的支持和貢獻。歡迎加入我們在 GitHub 討論區、 Reddit 和 Discord 的討論。

貢獻者

Next.js 是超過 3,000 位個別開發者、Google 和 Meta 等產業合作夥伴以及我們在 Vercel 的核心團隊共同努力的成果。此版本由以下人員貢獻：

The Next.js team: Andrew, Balazs, Ethan, Janka, Jiachi, Jimmy, JJ, Josh, Sam, Sebastian, Sebbie, Shu, Steven, Tim, Wyatt, and Zack.
Turbopack 團隊： Donny、 Leah、 Maia、 OJ、 Tobias 和 Will。
Next.js 文件：Delba、Steph、Michael、Anthony 以及 Lee。

非常感謝 @taishikato、@JesseKoldewijn、@Evavic44、@feugy、@liamlaverty、@dvoytenko、@SukkaW、@wbinnssmith、@rishabhpoddar、@better-salmon、@ziyafenn、@A7med3bdulBaset、@jasonuc、@yossydev、@Prachi-meon、@InfiniteCodeMonkeys、@ForsakenHarmony、@miketimmerman、@kwonoj、@williamli、@gnoff、@jsteele-stripe、@chungweileong94、@WITS、@sogoagain、@junioryono、@eisafaqiri、@yannbolliger、@aramikuto、@rocketman-21、@kenji-webdev、@michaelpeterswa、@Dannymx、@vpaflah、@zeevo、@chrisweb、@stefangeneralao、@tknickman、@Kikobeats、@ubinatus、@code-haseeb、@hmmChase、@byhow、@DanielRivers、@wojtekmaj、@paramoshkinandrew、@OMikkel、@theitaliandev、@oliviertassinari、@Ishaan2053、@Sandeep-Mani、@alyahmedaly、@Lezzio、@devjiwonchoi、@juliusmarminge、@szmazhr、@eddiejaoude、@itz-Me-Pj、@AndersDJohnson、@gentamura、@tills13、@dijonmusters、@SaiGanesh21、@vordgi、@ryota-murakami、@tszhong0411、@officialrajdeepsingh、@alexpuertasr、@AkifumiSato、@Jonas-PFX、@icyJoseph、@florian-lp、@pbzona、@erfanium、@remcohaszing、@bernardobelchior、@willashe、@kevinmitch14、@smakosh、@mnjongerius、@asobirov、@theoholl、@suu3、@ArianHamdi、@adrianha、@Sina-Abf、@kuzeykose、@meenie、@nphmuller、@javivelasco、@belgattitude、@Svetoslav99、@johnslemmer、@colbyfayock、@mehranmf31、@m-nakamura145、@ryo8000、@aryaemami59、@bestlyg、@jinsoul75、@petrovmiroslav、@nattui、@zhuyedev、@dongwonnn、@nhducit、@flotwig、@Schmavery、@abhinaypandey02、@rvetere、@coffeecupjapan、@cjimmy、@Soheiljafarnejad、@jantimon、@zengspr、@wesbos、@neomad1337、@MaxLeiter 以及 @devr77 的協助！

Next.js 14.2

建置記憶體使用量 文件中了解更多資訊。

建置記憶體使用量了解更多資訊。