Back返回部落格

Next.js 15.2

Next.js 15.2 包含錯誤除錯、元數據 (metadata)、Turbopack 等多項更新。

Next.js 15.2 包含以下更新：

立即升級，或透過以下指令開始使用：

Terminal
# 使用自動化升級 CLI
npx @next/codemod@canary upgrade latest
 
# ...或手動升級
npm install next@latest react@latest react-dom@latest
 
# ...或建立新專案
npx create-next-app@latest

重新設計的錯誤介面與改進的堆疊追蹤

我們針對應用程式開發過程中可能遇到的錯誤，進行了視覺與品質上的改進。以下是各項改進內容：

錯誤覆蓋層

Next.js 15.2 版本後的錯誤覆蓋層範例

我們全面翻新了 Next.js 中錯誤訊息的 UI 與呈現方式，使其更易於理解。新設計突顯了錯誤的核心細節——如錯誤訊息、相關程式碼框架與呼叫堆疊——同時減少來自函式庫或依賴項程式碼的干擾。這意味著您可以更快找出問題根源並開始修復。

利用 React 新引入的 owner stacks 功能，我們現在能更精確地定位錯誤來源。Next.js 現在能夠顯示實際拋出錯誤的子元件，跳過那些與錯誤元素無關的中介元件。

我們也讓自訂指示器偏好設定變得更簡單，無需額外配置。

Next.js 開發工具偏好設定範例

我們在錯誤覆蓋層底部新增了意見回饋區塊，讓您評分錯誤訊息的實用程度。您的意見能幫助我們了解常見痛點並改進錯誤訊息，使除錯過程更順暢。

開發指示器

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

我們將開發相關資訊整合到一個全新的簡潔指示器中，顯示如渲染模式與建置狀態等細節。

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

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

  • 當前路由的渲染模式（靜態/動態）
  • Turbopack 編譯狀態
  • 活動中的錯誤與快速存取錯誤覆蓋層的選項

未來更新將擴充此選單，包含：

  • PPR (部分預渲染) 除錯工具
  • 快取監控功能
  • 其他開發者工具

這種統一的設計將所有關鍵開發資訊集中在一個易於存取的位置。我們將根據您的回饋持續精進此功能。

串流元數據 (Streaming metadata)

在 generateMetadata 中獲取動態數據或執行非同步操作通常是必要的。在先前版本的 Next.js 中，這些元數據需要先完成生成，才能發送初始 UI，以便將其包含在文件 <head> 中。

這意味著對於許多已準備好快速初始 UI 的頁面，初始渲染仍會被不影響視覺呈現的數據需求所延遲。我們在 15.2 版本中改進了這一點，允許在 generateMetadata 完成前就將初始 UI 發送至瀏覽器。

Next.js 開發工具偏好設定範例

然而，為了保持與預期在文件 <head> 中獲取元數據的機器人與爬蟲的相容性，我們仍會延遲對特定機器人用戶代理發送 HTML。如果您需要更精細地控制哪些機器人接收此處理，可以透過 next.config.js 中的 htmlLimitedBots 選項自訂用於服務它們的正則表達式。

了解更多關於 串流元數據。

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 倉庫中的 原始視圖轉場拉取請求。這項工作是基於瀏覽器原生實現的視圖轉場功能。

隨著穩定性的進展，我們將發布更多文件與範例。

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

我們一直在開發一個新的實驗性標誌，允許在 Next.js Middleware 中使用 Node.js 運行環境。

要啟用此功能，請在 next.config.js 中添加以下內容：

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

然後您可以在 Middleware 的 config 導出中指定 Node.js 運行環境：

middleware.js
import bcrypt from 'bcrypt';
 
const API_KEY_HASH = process.env.API_KEY_HASH; // 環境變數中的預雜湊 API 金鑰
 
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 金鑰驗證通過');
}
 
export const config = {
  runtime: 'nodejs',
};

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

我們計劃藉此機會改進並重塑 Middleware API。如果您有任何建議或需求，請告訴我們。Node.js Middleware 是社群最常請求的功能之一，我們很高興能解決這個需求。

即將推出

  • "use cache" (測試版)： 我們一直在穩定 "use cache" 作為獨立功能。請關注後續版本中的更多細節。了解更多關於 "use cache"。
  • Turbopack 持久快取 (實驗性功能)： 我們已在 Vercel 內部測試持久快取並獲得積極的效能改進。一旦進一步穩定後，我們將透過功能標誌發布以獲取更多回饋與測試。

其他變更

  • [功能] 為 create-next-app 添加 --api 標誌以建立無頭 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 link 標籤 (PR)
  • [改進] 改進 metadata 與 <Link> 元件的 JSDocs (PR)
  • [改進] Middleware 應匹配 next/image 請求 (PR)
  • [改進] 在預設錯誤邊界訊息中添加主機名稱 (PR)
  • [改進] 透過 reportError 發送未被明確錯誤邊界處理的錯誤 (PR)

貢獻者

Next.js 是超過 3,000 位開發者共同努力的成果。此版本由以下人員共同打造：

特別感謝 @mischnic, @Marukome0743, @JamBalaya56562, @creationix, @noreiller, @styfle, @abdonrd, @ollyw, @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, @Manoj-M-S, @lfades, @matmannion, @mikeboensel, @nphmuller, @apostolos, @k15a, @pavelee, @locothedev, @vexcat, @Zach-Jaensch, @decepulis, @gadcam, @lukahartwig, @jsanford8, @RobinMalfait, @raunofreiberg, @mohsen1, @skushagra, @amannn, @HQidea, @jrandolf, @smit-err, @littledivy, @k35o, @martinsione, @CvX, @msereniti, @Timer, @Iftee97, @chibicode, @RobPruzan, @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 的協助！