next-upgrade

next-upgrade

熱門

將 Next.js 升級至最新版本,遵循官方遷移指南與 codemods

944星標
75分支
更新於 2026/6/22
SKILL.md
readonlyread-only
name
next-upgrade
description

將 Next.js 升級至最新版本,遵循官方遷移指南與 codemods

升級 Next.js

將當前專案升級至最新的 Next.js 版本,遵循官方遷移指南。

操作步驟

  1. 偵測當前版本:讀取 package.json 以識別當前 Next.js 版本及相關依賴(React、React DOM 等)

  2. 取得最新升級指南:使用 WebFetch 取得官方升級文件:

  3. 決定升級路徑:根據當前版本,判斷哪些遷移步驟適用。若為主要版本跳躍,請逐步升級(例如 13 → 14 → 15)。

  4. 先執行 codemods:Next.js 提供 codemods 來自動處理破壞性變更:

    npx @next/codemod@latest <transform> <path>
    

    常見轉換:

    • next-async-request-api - 更新非同步 Request API(v15)
    • next-request-geo-ip - 遷移 geo/ip 屬性(v15)
    • next-dynamic-access-named-export - 轉換動態導入(v15)
  5. 更新依賴:同時升級 Next.js 與同儕依賴:

    npm install next@latest react@latest react-dom@latest
    
  6. 檢視破壞性變更:查看升級指南中需要手動調整的部分:

    • API 變更(例如 v15 的非同步參數)
    • next.config.js 中的設定變更
    • 已棄用功能的移除
  7. 更新 TypeScript 型別(如適用):

    npm install @types/react@latest @types/react-dom@latest
    
  8. 測試升級

    • 執行 npm run build 檢查建置錯誤
    • 執行 npm run dev 並測試主要功能