Back返回部落格

Next.js 15.3

Next.js 15.3 包含適用於建置的 Turbopack、新的客戶端檢測與導航鉤子等功能。

Next.js 15.3 包含適用於建置的 Turbopack、新的客戶端檢測與導航鉤子等功能：

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

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

Turbopack 建置功能 (alpha)

繼 next dev --turbopack 穩定版發布後，超過 50% 的 Next.js 15 開發階段已開始使用 Turbopack。

此版本包含 next build --turbopack 的 alpha 版本，將本地開發的效能提升帶入生產環境建置。

升級至 15.3 並執行以下指令，即可嘗試 Turbopack 的生產環境建置：

Terminal
next build --turbopack

功能

目前 next build 的整合測試已通過 99.3%。您可以在 areweturboyet.com 追蹤我們邁向 100% 的進度。若您的應用程式已能在 dev 模式下使用 Turbopack，則應可直接套用於 build 模式。

Turbopack 建置目前處於 alpha 階段。在此階段，我們不建議將其用於生產環境中的關鍵任務應用程式。您可以在預覽或測試環境中嘗試，或在本地執行建置以觀察打包大小與效能的差異。

我們正積極透過範圍提升 (scope hoisting)、改進分塊 (chunking) 等優化來縮小這些效能差距。

建置效能

我們已在 Vercel 的大型內部單一儲存庫 (monorepo) 與早期合作夥伴的程式碼庫上驗證 Turbopack。相較於先前的 Webpack 實作，Turbopack 架構的一個優勢在於其效能會隨著 CPU 核心數增加而提升：

  • 4 核心時：比 Webpack 快 28%
  • 16 核心時：比 Webpack 快 60%
  • 30 核心時：比 Webpack 快 83%

透過我們在持久化快取 (persistent caching) 上的實驗性工作，這些建置時間還能進一步縮短。我們將在未來的版本中分享更多資訊。

生態系統

我們正與 Sentry 等常用整合工具合作，確保它們在穩定版發布前能相容於 next build --turbopack。若您是工具開發者並希望與我們合作確保相容性，請聯繫 @leerob on X。

意見回饋

請分享您的使用體驗，即使一切順利，這將幫助我們準備穩定版：

next.config.ts 中的 Turbopack 設定 (穩定版)

next.config.ts 中的 Turbopack 設定已從 experimental.turbo 移至頂層的 turbopack 鍵：

next.config.ts
import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
    },
  },
};
 
export default nextConfig;

為確保相容性，experimental.turbo 選項將持續支援至 Next.js 的下一個主要版本。

完整的 Turbopack 設定選項清單，請參閱 Turbopack API 參考文件。

社群支援的 Rspack (實驗性)

Rspack 團隊已為 Next.js 建立了一個社群插件。

這為需要近乎完全 Webpack API 相容性、但尚未能轉移至 Turbopack 的 Next.js 使用者提供了一個選項，以改善其本地編譯與建置時間。我們對 Turbopack 的進展充滿信心，並將持續為 Webpack 使用者提供漸進式的遷移路徑。

雖然這並非官方 Next.js 插件，但我們正與 Rspack 團隊合作。雙方將在 SWC 和 Lightning CSS 等共享基礎上協作，造福所有 Next.js 使用者與更廣泛的生態系統。

若您想探索在 Next.js 中使用 Rspack，可以使用 next-rspack 轉接器。我們正對該轉接器執行整合測試，目前通過約 96% 的測試。

查看範例 或參閱 Rspack 文件 以了解更多。

客戶端檢測鉤子

instrumentation-client.js|ts 檔案允許您新增監控與分析程式碼，這些程式碼會在應用程式的前端程式碼開始執行前運行。

這非常適合在生命週期中盡早設定效能追蹤、錯誤監控或其他客戶端可觀測性工具。

instrumentation-client.js
// 設定效能監控
performance.mark('app-init');
 
// 初始化分析工具
console.log('Analytics initialized');
 
// 設定錯誤追蹤
window.addEventListener('error', (event) => {
  // 傳送至您的錯誤追蹤服務
  reportError(event.error);
});

將此檔案置於專案根目錄，類似於 伺服器端檢測。

更多資訊請參閱 instrumentation-client 文件。

導航鉤子

我們在 Next.js 15.3 中引入了新的導航鉤子，增強了客戶端路由功能，讓您更輕鬆地開發本地化載入狀態，並實作如導航取消等複雜控制。

onNavigate

此事件處理器是 Link 元件的新屬性，會在客戶端導航期間執行，讓您精確控制應用程式的路由行為。

與適用於所有點擊的 onClick 事件不同，onNavigate 可用於 單頁應用 (SPA) 導航，讓您能執行程式碼，甚至透過 preventDefault() 取消導航。

此 API 可用於實作過渡動畫、導航守衛或僅在實際頁面轉換時執行的分析追蹤。

更多資訊請參閱 onNavigate 文件。

useLinkStatus

useLinkStatus 客戶端元件鉤子會返回一個 pending 布林值，指示導航是否正在進行中，讓您能本地化控制載入狀態。

此 API 參考自 React 的 useFormStatus，有助於在頁面轉換期間新增自訂載入指示器，特別是在預取 (prefetching) 停用或連結路由沒有專用載入狀態時。

透過將使用 useLinkStatus 的元件作為 <Link> 元件的子元件，您可以建立能即時回應導航事件的響應式 UI 元素。

更多資訊請參閱 useLinkStatus 文件。

TypeScript 插件效能改進

Next.js TypeScript 語言伺服器插件 (LSP) 現在更快了。

LSP 提供內聯 Intellisense 功能，如伺服器/客戶端邊界驗證、元件屬性提示、設定自動完成，以及 React 伺服器元件中禁用 API 的錯誤偵測。在極大型程式碼庫中，此插件先前可能導致 TypeScript 語言服務停滯或崩潰。

我們已進行重大效能改進以解決這些問題。在內部測試中，插件回應時間提升約 60%，且不再出現凍結或崩潰。

其他變更

  • [功能] 在 images.remotePatterns 中支援 new URL() (#77692)
  • [功能] 視口 (viewport) 選項現在與 metadata 分離 (#77427)
  • [功能] 新增 unstable_dynamicOnHover 選項 (#77866)
  • [功能] 新增對 Pinterest Rich Pins 的支援 (#76988)
  • [改進] 確保在路由處理器中呼叫 revalidate 後接重定向時仍能運作 (#77090)
  • [改進] 確保在伺服器動作中呼叫 revalidate 後保持強一致性 (#76885)
  • [改進] 升級 sharp 以加速 PNG 轉 AVIF (#77839)

貢獻者

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

特別感謝 @raunofreiberg、@huozhi、@ijjk、@timneutkens、@gaojude、@leerob、@mezotv、@bgw、@samcx、@ztanner、@sokra、@mischnic、@wbinnssmith、@kdy1、@unstubbable、@ahabhgk、@ScriptedAlchemy、@SukkaW、@wyattjoh、@eps1lon、@Amirroid、@Netail、@lubieowoce、@gnoff、@jackwilson323、@acdlite、@sbougerel、@kevva、@kasperpeulen、@Cy-Tek、@dvoytenko、@husseinraoouf、@isBatak、@iamkd、@delbaoliveira、@jantimon、@padmaia、@Bernardoow、@styfle、@devjiwonchoi、@JamBalaya56562 和 @Marukome0743 的協助！