跳到主要內容
返回部落格

2025年2月26日 星期三

Next.js 15.2

作者
Jiachi Liu
Jiachi Liu@huozhi
Jiwon Choi
Jiwon Choi@devjiwonchoi
Jude Gao
Jude Gao@gao_jude
Maia Teegarden
Maia Teegarden@padmaia
Pranathi Peri
Pranathi Peri@pranathiperii
Rauno Freiberg
Rauno Freiberg@raunofreiberg
Sebastian Silbermann
Sebastian Silbermann@sebsilbermann
Zack Tanner
Zack Tanner@zt1072

Next.js 15.2 為錯誤帶來更優異的除錯體驗。我們很高興推出

今天就升級，或從以下開始

終端機
# Use the automated upgrade CLI
npx @next/codemod@canary upgrade latest
 
# ...or upgrade manually
npm install next@latest react@latest react-dom@latest
 
# ...or start a new project
npx create-next-app@latest

重新設計的錯誤 UI & 改善的堆疊追蹤

我們很高興宣布，針對您在建置應用程式時可能遇到的錯誤，在視覺和品質上都有所提升。讓我們逐步了解各方面的改進

錯誤覆蓋層

An example of the Next.js error overlay after version 15.2
Next.js 15.2 版本之後的錯誤覆蓋層範例

我們徹底改造了 Next.js 中錯誤訊息的 UI 和呈現方式，使其更容易理解。新的設計突顯了錯誤的核心細節，例如訊息、相關的程式碼框架和呼叫堆疊，同時減少了來自函式庫或相依性程式碼的雜訊。這表示您可以快速找到問題的根源並更快開始修復。

運用 React 中新引入的 owner stacks 功能，我們現在能夠更精確地提供錯誤來源的資訊。Next.js 現在能夠顯示負責拋出錯誤的子元件，跳過與造成錯誤元素無關的中介元素。

我們也讓使用者更容易自訂指示器偏好設定，而無需新增額外的設定。

An example of the Next.js dev tools preferences
Next.js 開發者工具偏好設定範例

我們在錯誤覆蓋層底部新增了意見回饋區塊，讓您可以評價錯誤訊息的實用程度。您的意見有助於我們了解常見的痛點，並改進錯誤訊息，讓除錯更輕鬆。

開發指示器

開發指示器的各種狀態，從渲染到顯示額外資訊。

我們已將開發資訊整合到一個新的、精簡的指示器中，該指示器會顯示渲染模式和建置狀態等詳細資訊。

在編譯期間，當您在路由之間導航時，您會注意到一個變暗的動畫 Next.js 標誌。一旦編譯完成且 React 開始渲染，標誌就會變亮，從而提供應用程式狀態的視覺提示。

現在開啟開發指示器會顯示

  • 您目前路由的渲染模式 (靜態/動態)
  • Turbopack 編譯狀態
  • 作用中的錯誤，可快速存取錯誤覆蓋層

未來的更新將擴展此選單以包含

  • PPR (部分預先渲染) 除錯工具
  • 快取監控功能
  • 額外的開發者工具

這種統一的方法將所有關鍵的開發資訊放在一個易於存取的位置。我們將根據您的意見回饋，在未來的版本中繼續改進和擴展此功能。

串流 Metadata

通常有時候需要在 generateMetadata 中提取動態資料或執行一些非同步操作。在舊版本的 Next.js 中，此 metadata 需要完成產生後，才會傳送初始 UI，以便將其包含在文件 <head> 中。

這表示對於許多具有快速初始 UI 的頁面，初始渲染仍然會因資料需求而延遲，但這些資料需求實際上不會影響使用者在視覺上看到的內容。我們在 15.2 中改進了這一點，允許在 generateMetadata 完成之前，就先將初始 UI 傳送到瀏覽器。

然而，為了保持與期望 metadata 在文件 <head> 中可用的機器人和爬蟲程式的相容性，我們仍然會延遲將 HTML 傳送給某些機器人使用者代理程式。如果您需要更精細地控制哪些機器人會受到這種處理，您可以透過 next.config.js 中的 htmlLimitedBots 選項來自訂用於服務它們的 regex。

深入了解串流 metadata。

Turbopack 效能提升

Turbopack 已在 Next.js 15 中標記為穩定版。

我們一直致力於提升 Turbopack 的效能，尤其是在沒有持久快取的場景中。在此版本中，我們推出了以下增強功能

  • 更快的編譯時間： 早期採用者回報，與 Next.js 15.1 相比，在存取路由時，編譯時間最多加快了 57.6%。
  • 降低記憶體用量： 對於 vercel.com 應用程式，我們觀察到在本地開發期間記憶體用量減少了 30%。

透過這些改進，Turbopack 現在在幾乎所有情況下都應該比 Webpack 更快。如果您遇到應用程式並非如此的情況，請與我們聯繫——我們想要調查這些情況。

我們在持久快取和生產版本建置方面也取得了進展。雖然這些功能尚未準備好發布實驗性版本，但我們已開始在真實專案中測試它們。一旦它們可以更廣泛地使用，我們將分享更詳細的指標。

React 視圖轉換 (實驗性功能)

我們新增了一個功能標誌，以啟用 React 中全新的實驗性視圖轉換 API。這個新的 API 讓您可以在應用程式中的不同視圖和元件之間製作動畫。

若要啟用此功能，請將以下內容新增至您的 next.config.js

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

注意： 此功能為高度實驗性，未來版本可能會有所變更。

有關如何使用此功能的更多資訊，請參閱 React 儲存庫中的 原始視圖轉換 PR。隨著穩定性的進展，我們將發布更多文件和範例。

Node.js 中介層 (實驗性功能)

我們一直致力於開發一個新的實驗性標誌，以允許將 Node.js 執行環境用於 Next.js 中介層。

若要啟用此功能，請將以下內容新增至您的 next.config.js

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

然後您可以在中介層 config 輸出中指定 Node.js 執行環境

middleware.js
import bcrypt from 'bcrypt';
 
const API_KEY_HASH = process.env.API_KEY_HASH; // Pre-hashed API key in env
 
export default async function middleware(req) {
  const apiKey = req.headers.get('x-api-key');
 
  if (!apiKey || !(await bcrypt.compare(apiKey, API_KEY_HASH))) {
    return new Response('Forbidden', { status: 403 });
  }
 
  console.log('API key validated');
}
 
export const config = {
  runtime: 'nodejs',
};

注意： 此功能尚未建議用於生產環境。因此，除非您使用的是 next@canary 版本而不是穩定版本，否則 Next.js 會拋出錯誤。

我們計劃藉此機會改進和重塑中介層 API。如果您有任何建議或要求，請告訴我們。這是社群最希望的功能之一，我們很高興能提供解決方案。

即將推出

  • "use cache" (beta 版)：我們一直致力於內部測試和穩定 "use cache" 作為獨立功能。敬請關注未來版本中的更多詳細資訊。深入了解 "use cache"。
  • Turbopack 持久快取 (實驗性功能)：我們一直在 Vercel 內部測試持久快取，並獲得了正面的效能提升。一旦我們進一步穩定它，我們將在功能標誌後發布它，以徵求更多意見回饋和測試。

其他變更

  • [功能] 新增 --api 標誌，以使用 create-next-app 建立無頭 API 專案 (PR)
  • [功能] 新增對 next/image 的 images.qualities 支援 (PR)
  • [棄用] 針對 App Router 中 i18n 設定的棄用發出警告 (PR)
  • [改進] 提升 no-html-link-for-pages 的 lint 效能 (PR)
  • [改進] 如果 "use action" 指令使用不正確，則發出建置錯誤 (PR)
  • [改進] 在開發期間，將 global-error 與開發覆蓋層一起顯示 (PR)
  • [改進] 允許在開發伺服器中停用 HTTP 請求記錄 (PR)
  • [改進] 新增分頁 SEO 連結標籤 (PR)
  • [改進] 改善 metadata 和 <Link> 元件的 JSDoc (PR)
  • [改進] 中介層應比對 next/image 請求 (PR)
  • [改進] 將主機名稱新增至預設錯誤邊界訊息 (PR)
  • [改進] 透過 reportError 傳送未由明確錯誤邊界處理的錯誤 (PR)

貢獻者

Next.js 是超過 3,000 位個別開發者共同努力的成果。此版本由以下人員為您帶來

衷心感謝 @ijjk、@unstubbable、@bgw、@gnoff、@eps1lon、@ztanner、@mischnic、@Marukome0743、@leerob、@gaojude、@lubieowoce、@acdlite、@kdy1、@JamBalaya56562、@creationix、@noreiller、@samcx、@delbaoliveira、@styfle、@abdonrd、@ollyw、@wyattjoh、@devjiwonchoi、@aymericzip、@davidhu2000、@attilarepka、@devpla、@dydals3440、@huozhi、@wbinnssmith、@suu3、@PapatMayuri、@Sahil4883、@abyii、@molebox、@sokra、@maciej-ka、@abvthecity、@damiensedgwick、@alitas、@RiskyMH、@ytreister、@sommeeeer、@n1ckoates、@yongholeeme、@spidersouris、@gurkerl83、@cassiossantos、@Netail、@tknickman、@eur00t、@cseas、@nnnnoel、@timneutkens、@Manoj-M-S、@lfades、@sebmarkbage、@matmannion、@mikeboensel、@nphmuller、@apostolos、@k15a、@pavelee、@locothedev、@vexcat、@Zach-Jaensch、@decepulis、@gadcam、@lukahartwig、@jsanford8、@RobinMalfait、@raunofreiberg、@mohsen1、@skushagra、@feedthejim、@amannn、@HQidea、@jrandolf、@smit-err、@littledivy、@k35o、@martinsione、@CvX、@msereniti、@Timer、@Iftee97、@chibicode、@RobPruzan、@padmaia、@PlagueFPS、@bjunix、@maximevtush、@michaelven、@sedlukha、@johannpinson、@AxelUser、@Nayeem-XTREME、@IcaroG、@blurrah、@lachlanjc、@ashi009、@conico974、@raphaelcosta、@dulmandakh、@khuezy、@Knoa0405、@wangsijie、@stefanprobst、@wentsul、@loopy-lim、@bratvanov、@hedgeday 和 @cassian-goode 的協助！