Back返回部落格

Next.js 15 RC 2

Next.js 15 第二版候選版本 (RC) 現已發布。此版本讓您能在正式穩定版發布前，搶先測試最新功能。

繼五月份發布 首個 Next.js 15 候選版本 後，我們根據您的反饋準備了第二版候選版本。以下是我們的主要更新內容：

立即試用 Next.js 15 候選版本 (RC2)：

# 使用新版自動升級 CLI
npx @next/codemod@canary upgrade rc
 
# 或手動升級
npm install next@rc react@rc react-dom@rc

注意： 此候選版本包含 前一個 RC 版 的所有變更。

使用 codemod CLI 輕鬆升級

每個 Next.js 主要版本都會附帶 codemod（自動化程式碼轉換工具），協助自動化處理重大變更的升級流程。

為了讓升級更順暢，我們發布了增強版 codemod CLI：

npx @next/codemod@canary upgrade rc

此工具可協助您將程式碼庫升級至最新穩定版或預發布版本。CLI 會更新您的依賴套件、顯示可用的 codemod，並引導您完成套用流程。命令列中指定的發佈標籤（如 @rc、@canary 等）將決定要升級的目標版本。

深入了解 Next.js codemod。

Turbopack 開發工具

Turbopack 本地開發工具將在 Next.js 15 正式版中達到穩定狀態，但仍保持可選使用。您現在即可透過以下命令試用：

next dev --turbo

感謝數千名開發者在 Turbopack 測試版與候選版本階段參與測試、回報問題與驗證修正，我們已解決 54 個 GitHub 問題。除了社群貢獻外，我們在 vercel.com、v0.dev 和 nextjs.org 的內部測試也協助發現了大量改進點。

過去三個月，我們專注於優化冷編譯效能。與前一版本相比，我們觀察到：

  • 記憶體使用量 減少 25–35%
  • 對於包含數千個模組的大型頁面，編譯速度 提升 30–50%

我們將在未來版本中持續優化這些方面。

展望未來，Turbopack 團隊在持久化快取、降低記憶體使用量與 next build 的 Turbopack 支援方面取得顯著進展——目前 測試通過率達 96%。

注意： 查看 Turbopack 的 支援與不支援功能清單。

非同步請求 API (重大變更)

在傳統的伺服器端渲染 (SSR) 中，伺服器會等待請求後才開始渲染內容。然而，並非所有元件都依賴請求特定資料，因此沒必要等待請求才渲染它們。理想情況下，伺服器應在請求到達前完成盡可能多的準備工作。為實現此目標，並為未來優化奠定基礎，我們需要明確知道何時該等待請求。

因此，我們將依賴請求特定資料的 API——如 headers、cookies、params 和 searchParams——改為 非同步 形式。

import { cookies } from 'next/headers';
 
export async function AdminPanel() {
  const cookieStore = await cookies();
  const token = cookieStore.get('token');
 
  // ...
}

這是個 重大變更，影響以下 API：

  • cookies
  • headers
  • draftMode
  • layout.js、page.js、route.js、default.js、generateMetadata 和 generateViewport 中的 params
  • page.js 中的 searchParams

為簡化遷移流程，這些 API 暫時仍可同步存取，但在開發與生產環境中會顯示警告，直到下個主要版本。我們提供 codemod 來自動化遷移流程：

npx @next/codemod@canary next-async-request-api .

若 codemod 無法完整遷移您的程式碼，請參閱 升級指南。我們也提供了一個 範例 展示如何將 Next.js 應用程式遷移至新 API。

強化伺服器動作安全性

伺服器動作 (Server Actions) 是可從客戶端呼叫的伺服器端函式。它們透過在檔案頂部添加 'use server' 指令並導出非同步函式來定義。

即使某個伺服器動作或工具函式未在程式碼其他部分導入，它仍是公開可存取的 HTTP 端點。雖然此行為技術上正確，但可能導致無意中暴露這些函式。

為提升安全性，我們引入以下強化措施：

  • 無用程式碼消除： 未使用的伺服器動作不會將其 ID 暴露給客戶端 JavaScript 套件，減少套件大小並提升效能
  • 安全動作 ID： Next.js 現在會建立不可猜測、非確定性的 ID，讓客戶端能參考並呼叫伺服器動作。這些 ID 會在每次建置間定期重新計算以增強安全性
// app/actions.js
'use server';
 
// 此動作 **有** 在應用程式中使用，因此 Next.js
// 會建立安全 ID 讓客戶端能參考並呼叫此伺服器動作
export async function updateUserAction(formData) {}
 
// 此動作 **未** 在應用程式中使用，因此 Next.js
// 會在 `next build` 時自動移除這段程式碼
// 且不會建立公開端點
export async function deleteUserAction(formData) {}

您仍應將伺服器動作視為公開 HTTP 端點。了解更多關於 保護伺服器動作 的資訊。

靜態路由標示

Next.js 現在會在開發期間顯示靜態路由標示，協助您識別哪些路由是靜態或動態的。此視覺提示讓您更容易透過了解頁面渲染方式來優化效能。

您也可使用 next build 輸出來查看所有路由的渲染策略。

此更新是我們持續增強 Next.js 可觀測性的一部分，讓開發者能更輕鬆監控、除錯與優化應用程式。我們也正在開發專屬開發者工具，更多細節即將公布。

了解更多關於 靜態路由標示 的資訊，此功能可被停用。

<Form> 元件

新的 <Form> 元件擴展了 HTML <form> 元素，新增 預取 (prefetching)、客戶端導航 與漸進增強功能。

它特別適用於會導向新頁面的表單，例如導向結果頁面的搜尋表單。

import Form from 'next/form';
 
export default function Page() {
  return (
    <Form action="/search">
      <input name="query" />
      <button type="submit">提交</button>
    </Form>
  );
}

<Form> 元件提供以下功能：

  • 預取： 當表單進入視野時，會預先載入 版面配置 (layout) 與 載入狀態 (loading) UI，使導航更快速
  • 客戶端導航： 提交時會保留共享版面配置與客戶端狀態
  • 漸進增強： 若 JavaScript 尚未載入，表單仍可透過完整頁面導航正常運作

以往要實現這些功能需要大量手動樣板程式碼。例如：

// 注意：此為簡化範例，不建議直接用於生產環境
 
'use client'
 
import { useEffect } from 'react'
import { useRouter } from 'next/navigation'
 
export default function Form(props) {
  const action = props.action
  const router = useRouter()
 
  useEffect(() => {
    // 若表單目標是 URL 則進行預取
    if (typeof action === 'string') {
      router.prefetch(action)
    }
  }, [action, router])
 
  function onSubmit(event) {
    event.preventDefault()
 
    // 獲取所有表單欄位並觸發帶有 URL 編碼資料的 `router.push`
    const formData = new FormData(event.currentTarget)
    const data = new URLSearchParams()
 
    for (const [name, value] of formData) {
      data.append(name, value as string)
    }
 
    router.push(`${action}?${data.toString()}`)
  }
 
  if (typeof action === 'string') {
    return <form onSubmit={onSubmit} {...props} />
  }
 
  return <form {...props} />
}

了解更多關於 <Form> 元件 的資訊。

支援 next.config.ts

Next.js 現在支援 TypeScript 格式的 next.config.ts 設定檔，並提供 NextConfig 類型以實現自動完成與類型安全的選項：

import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  /* 在此設定選項 */
};
 
export default nextConfig;

了解更多關於 Next.js 的 TypeScript 支援。

instrumentation.js (穩定版)

instrumentation 檔案搭配 register() API，讓使用者能接入 Next.js 伺服器生命週期，監控效能、追蹤錯誤來源，並與 OpenTelemetry 等觀測性工具深度整合。

此功能現已 穩定，可移除 experimental.instrumentationHook 設定選項。

此外，我們與 Sentry 合作設計了新的 onRequestError 鉤子，可用於：

  • 捕獲伺服器端所有錯誤的重要上下文，包含：
    • 路由：Pages Router 或 App Router
    • 伺服器上下文：Server Component、Server Action、Route Handler 或 Middleware
  • 將錯誤報告至您喜愛的觀測性服務供應商
export async function onRequestError(err, request, context) {
  await fetch('https://...', {
    method: 'POST',
    body: JSON.stringify({ message: err.message, request, context }),
    headers: { 'Content-Type': 'application/json' },
  });
}
 
export async function register() {
  // 初始化您喜愛的觀測性服務 SDK
}

了解更多關於 onRequestError 函式 的資訊。

開發與建置改進

伺服器元件熱模組替換 (HMR)

在開發期間，伺服器元件會在儲存時重新執行。這意味著任何對 API 端點或第三方服務的 fetch 請求也會被呼叫。

為提升本地開發效能並減少計費 API 呼叫的潛在成本，我們現在確保熱模組替換 (HMR) 能重複使用先前渲染的 fetch 回應。

了解更多關於 伺服器元件 HMR 快取 的資訊。

App Router 靜態生成加速

我們優化了靜態生成流程以提升建置速度，特別是針對含有慢速網路請求的頁面。

先前，我們的靜態優化流程會渲染頁面兩次——一次生成客戶端導航資料，第二次渲染初始頁面訪問的 HTML。現在我們重複使用第一次渲染結果，省去第二次流程，減少工作量與建置時間。

此外，靜態生成工作現會跨頁面共享 fetch 快取。若 fetch 呼叫未選擇退出快取，其結果會被同一工作處理的其他頁面重複使用，減少對相同資料的重複請求。

進階靜態生成控制（實驗性功能）

我們新增了實驗性支援，讓進階使用場景能更精確控制靜態生成流程，適合需要高度自訂化的特殊需求。

除非有特定需求，否則建議維持當前預設值，因為這些選項可能導致資源使用量增加，並因併發量提升而引發記憶體不足錯誤。

const nextConfig = {
  experimental: {
	  // Next.js 在構建失敗前會重試失敗頁面生成的次數
    staticGenerationRetryCount: 1
    // 每個工作執行緒處理的頁面數量上限
    staticGenerationMaxConcurrency: 8
    // 觸發新增導出工作執行緒的最低頁面數量
    staticGenerationMinPagesPerWorker: 25
  },
}
 
export default nextConfig;

了解更多關於靜態生成選項。

自架主機的改進

自架應用程式時，您可能需要更精確控制 Cache-Control 指令。

常見需求是控制 ISR 頁面的 stale-while-revalidate 週期。我們實作了兩項改進：

  1. 現在可透過 next.config 設定 expireTime 值（此選項前身為 experimental.swrDelta）
  2. 將預設值更新為一年，確保多數 CDN 能完整套用預期的 stale-while-revalidate 語意

我們也不再以預設值覆蓋自訂的 Cache-Control 值，讓您能完全控制並確保與任何 CDN 設定的相容性。

最後，我們改進了自架環境的圖片最佳化流程。先前建議手動安裝 sharp 來最佳化 Next.js 伺服器的圖片，但此建議常被忽略。從 Next.js 15 開始，使用 next start 或獨立輸出模式時，無需手動安裝 sharp——Next.js 會自動啟用。

觀看我們全新的自架 Next.js 示範與教學影片了解更多。

ESLint 9 支援

Next.js 15 新增對 ESLint 9 的支援（ESLint 8 將於 2024 年 10 月 5 日終止維護）。

為確保平順過渡，Next.js 保持向後相容性，您可繼續使用 ESLint 8 或 9。

若您升級至 ESLint 9 且系統偵測到尚未採用新設定格式，Next.js 會自動套用 ESLINT_USE_FLAT_CONFIG=false 相容方案以簡化遷移。

此外，執行 next lint 時將移除已棄用選項如 —ext 和 —ignore-path。請注意 ESLint 10 最終將禁用這些舊設定，建議儘早開始遷移。

詳情請參閱遷移指南。

本次更新也升級 eslint-plugin-react-hooks 至 v5.0.0，新增多項 React Hooks 使用規則。所有變更請見 [email protected] 更新日誌。

其他變更

  • 包含先前 RC 1 部落格文章所述的所有變更
  • [重大變更] 棄用 App Router 中的 export const runtime = "experimental-edge"，請改用 export const runtime = "edge"。我們提供代碼修改工具協助轉換（PR）
  • [重大變更] 在渲染過程中呼叫 revalidateTag 和 revalidatePath 現在會拋出錯誤（PR）
  • [重大變更] instrumentation.js 和 middleware.js 檔案現在使用內建的 React 套件（PR）
  • [重大變更] 最低 Node.js 版本需求更新為 18.18.0（PR）
  • [重大變更] next/dynamic：已移除棄用的 suspense 屬性，且在 App Router 中使用時不再插入空白的 Suspense 邊界（PR）
  • [重大變更] Edge Runtime 解析模組時不再套用 worker 模組條件（PR）
  • [重大變更] 禁止在伺服器元件中使用 next/dynamic 時搭配 ssr: false 選項（PR）
  • [改進] outputFileTracingRoot、outputFileTracingIncludes 和 outputFileTracingExcludes 從實驗性功能升級為穩定功能（PR）
  • [改進] 避免將全域 CSS 檔案與深層樹狀結構中的 CSS 模組檔案合併（PR）
  • [改進] 現在可透過 NEXT_CACHE_HANDLER_PATH 環境變數指定快取處理器（PR）
  • [改進] Pages Router 現在同時支援 React 18 和 React 19（PR）
  • [改進] 啟用檢查器時，錯誤疊加層會顯示複製 Node.js 檢查器 URL 的按鈕（PR）
  • [改進] App Router 的客戶端預取現在使用 priority 屬性（PR）
  • [改進] Next.js 現在提供 unstable_rethrow 函式來重新拋出 App Router 中的內部錯誤（PR）
  • [改進] unstable_after 現在可用於靜態頁面（PR）
  • [改進] 若 next/dynamic 元件在 SSR 過程中使用，將預先取得 chunk（PR）
  • [改進] App Router 現在支援 esmExternals 選項（PR）
  • [改進] 可透過 experimental.allowDevelopmentBuild 選項允許在 next build 時使用 NODE_ENV=development 進行除錯（PR）
  • [改進] Pages Router 中已停用伺服器動作轉換（PR）
  • [改進] 建置工作執行緒結束時會防止建置程序卡住（PR）
  • [改進] 從伺服器動作重新導向時，現在會正確套用重新驗證（PR）
  • [改進] Edge Runtime 上平行路由的動態參數現在能正確處理（PR）
  • [改進] 靜態頁面在初始載入後會遵守 staleTime（PR）
  • [改進] 更新 vercel/og 修復記憶體洩漏問題（PR）
  • [改進] 調整時間戳記以支援如 msw 等套件用於 API 模擬（PR）

貢獻者

Next.js 是超過 3,000 位開發者與 Vercel 核心團隊共同合作的成果。本次發布特別感謝：

特別感謝 @huozhi、@shuding、@wyattjoh、@PaulAsjes、@mcnaveen、@timneutkens、@stipsan、@aktoriukas、@sirTangale、@greatvivek11、@sokra、@anatoliik-lyft、@wbinnssmith、@coltonehrman、@hungdoansy、@kxlow、@ztanner、@manovotny、@leerob、@ryota-murakami、@ijjk、@pnutmath、@feugy、@Jeffrey-Zutt、@wiesson、@eps1lon、@devjiwonchoi、@Ethan-Arrowood、@kenji-webdev、@domdomegg、@samcx、@Jaaneek、@evanwinter、@kdy1、@balazsorban44、@feedthejim、@ForsakenHarmony、@kwonoj、@delbaoliveira、@xiaohanyu、@dvoytenko、@bobaaaaa、@bgw、@gaspar09、@souporserious、@unflxw、@kiner-tang、@Ehren12、@EffectDoplera、@IAmKushagraSharma、@Auxdible、@sean-rallycry、@jeanmax1me、@unstubbable、@NilsJacobsen、@adiguno、@ryan-nauman、@zsh77、@KagamiChan、@steveluscher、@MehfoozurRehman、@vkryachko、@chentsulin、@samijaber、@begalinsaf、@FluxCapacitor2、@lukahartwig、@brianshano、@pavelglac、@styfle、@symant233、@HristovCodes、@karlhorky、@jonluca、@jonathan-ingram、@mknichel、@sopranopillow、@Gomah、@imddc、@notrab、@gabrielrolfsen、@remorses、@AbhiShake1、@agadzik、@rishabhpoddar、@rezamauliadi、@IncognitoTGT、@webtinax、@BunsDev、@nisabmohd、@z0n、@bennettdams、@joeshub、@n1ckoates、@srkirkland、@RiskyMH、@coopbri、@okoyecharles、@diogocapela、@dnhn、@typeofweb、@davidsa03、@imranolas、@lubieowoce、@maxhaomh、@mirasayon、@blvdmitry、@hwangstar156、@lforst、@emmerich、@christian-bromann、@Lsnsh、@datner、@hiro0218、@flybayer、@ianmacartney、@ypessoa、@ryohidaka、@icyJoseph、@Arinji2、@lovell、@nsams、@Nayeem-XTREME、@JamBalaya56562、@Arindam200、@gaojude、@qqww08、@todor0v、@tokkiyaa、@arlyon、@lorensr、@Juneezee、@Sayakie、@IGassmann、@bosconian-dynamics、@phryneas、@akazwz、@atik-persei、@shubh73、@alpedia0、@chogyejin、@notomo、@ArnoldVanN、@dhruv-kaushik、@kevva、@Kahitar、@anay-208、@boris-szl、@devnyxie、@LorisSigrist、@M-YasirGhaffar、@Lada496、@kippmr、@torresgol10、@pkiv、@Netail、@jontewks、@ArnaudFavier、@chrisjstott、@mratlamwala、@mayank1513、@karlkeefer、@kshehadeh、@Marukome0743、@a89529294、@anku255、@KeisukeNagakawa、@andrii-bodnar、@aldosch、@versecafe、@steadily-worked、@cfrank、@QiuranHu、@farsabbutt、@joostmeijles、@saltcod、@archanaagivale30、@crutchcorn、@crebelskydico、@Maaz-Ahmed007、@jophy-ye、@remcohaszing、@JoshuaKGoldberg、@creativoma、@GyoHeon、@SukkaW、@MaxLeiter、@neila-a、@stylessh、@Teddir、@ManuLpz4、@Julian-Louis、@syi0808、@mert-duzgun、@amannn、@MonstraG、@hamirmahal、@tariknh、@Kikobeats、@LichuAcu、@Kuboczoch、@himself65、@Sam-Phillemon9493、@Shruthireddy04、@Hemanshu-Upadhyay、@timfuhrmann、@controversial、@pathliving、@mischnic、@mauroaccornero、@NavidNourani、@allanchau、@ekremkenter、@yurivangeffen、@gnoff、@darthmaim、@gdborton、@Willem-Jaap、@KentoMoriwaki、@TrevorSayre、@marlier、@Luluno01、@xixixao、@domin-mnd、@niketchandivade、@N2D4、@kjugi、@luciancah、@mud-ali、@codeSTACKr、@luojiyin1987、@mehmetozguldev、@ronanru、@tknickman、@joelhooks、@khawajaJunaid、@rubyisrust、@abdull-haseeb、@bewinsnw、@housseindjirdeh、@li-jia-nan、@aralroca、@s-ekai、@ah100101、@jantimon、@jordienr、@iscekic、@Strift、@slimbde、@nauvalazhar、@HughHzyb、@guisehn、@wesbos、@OlyaPolya、@paarthmadan、@AhmedBaset、@dineshh-m、@avdeev、@Bhavya031、@MildTomato、@Bjornnyborg、@amikofalvy、@yosefbeder、@kjac、@woutvanderploeg、@Ocheretovich、@ProchaLu、@luismiramirez、@omahs、@theoludwig、@abhi12299、@sommeeeer、@lumirlumir、@royalfig、@iampoul、@molebox、@txxxxc、@zce、@mamuso、@kahlstrm、@vercel-release-bot、@zhawtof、@PapatMayuri、@PlagueFPS、@IDNK2203、@jericopulvera、@liby、@CannonLock、@timfish、@whatisagi、@none23、@haouvw、@Pyr33x、@SouthLink、@frydj、@CrutchTheClutch、@sleevezip、@r34son、@yunsii、@md-rejoyan-islam、@kartheesan05、@nattui、@KonkenBonken、@weicheng95、@brekk、@Francoscopic、@B33fb0n3、@ImDR、@nurullah、@hdodov、@ebCrypto、@soedirgo、@floriangosse、@Tim-Zj、@raeyoung-kim、@erwannbst、@DerTimonius、@hirotomoyamada、@Develliot、@chandanpasunoori、@vicb、@ankur-dwivedi、@kidonng、@baeharam、@AnaTofuZ、@coderfin、@xugetsu、@alessiomaffeis、@kutsan、@jordyfontoura、@sebmarkbage、@tranvanhieu01012002、@jlbovenzo、@Luk-z、@jaredhan418、@bangseongbeom、@penicillin0、@neoFinch、@DeepakBalaraman、@Manoj-M-S、@Unsleeping、@lonr、@Aerilym、@ytori、@acdlite、@actopas、@n-ii-ma、@adcichowski、@mobeigi、@JohnGemstone 與 @jjm2317 的協助！