9 月 19 日，Next.js 13.5 正式發佈，該版本通過以下方式提高了本地開發性能和可靠性： 本地伺服器啟動速度提高 22%：使用App和Pages Router可以更快地進行迭代 HMR（快速刷新）速度提高 29%：在保存更改時進行更快的迭代 記憶體使用量減少 40%：在運行next sta ...
9 月 19 日，Next.js 13.5 正式發佈，該版本通過以下方式提高了本地開發性能和可靠性：
-
本地伺服器啟動速度提高 22%：使用App和Pages Router可以更快地進行迭代
-
HMR（快速刷新）速度提高 29%：在保存更改時進行更快的迭代
-
記憶體使用量減少 40%：在運行
next start時測量 -
優化的包導入：使用流行的圖標和組件庫時進行更快的更新
-
next/image 改進：支持
<picture>標簽、暗模式等 -
修複了超過 438 個錯誤！
改善啟動和快速刷新時間
App Router 的採用在持續增加，根據 HTTP Archive 對前1000萬個網站進行的統計數據來看，其增長速度達到了每月 80%。
image.png
自 Next.js 13.4 版本以來，Next.js 團隊的重點一直是改進 App Router 應用的性能和可靠性。將13.4與13.5版本進行比較，在一個新的應用上，可以看到以下改進：
-
本地伺服器啟動速度提高 22%
-
HMR（快速刷新）速度提高 29%
-
記憶體使用量減少 40%
通過以下優化方法實現了這種性能提升：
-
通過緩存或減少慢速操作來減少工作量
-
優化昂貴的文件系統操作
-
在編譯過程中實現更好的增量樹遍歷
-
將不必要的阻塞同步調用改為懶載入
-
自動配置大型圖標庫
Next.js 用戶 Hanford 在他們的測試中報告了其編譯速度提升 87-92%！
image.png
在繼續迭代和改進當前打包工具性能的同時，Next.js 團隊還在開發 Turbopack（beta）以進一步提高性能。在13.5版本中，next dev --turbo現在支持更多功能。
優化的包導入
此版本對包導入進行了令人興奮的突破，改善了在使用大型圖標或組件庫以及其他重新導出了數百或數千個模塊的依賴項時的本地開發性能和生產冷啟動速度。
之前，添加了modularizeImports的支持，使開發者能夠配置在使用這些庫時如何解析導入。在13.5版本中，用optimizePackageImports替代了這個選項，它不需要指定導入映射，而是會自動優化導入。
像@mui/icons-material、@mui/material、date-fns、lodash、lodash-es、ramda、react-bootstrap、@headlessui/react、@heroicons/react和lucide-react等庫現在都可以自動優化，只載入實際使用的模塊，同時方便編寫帶有很多命名導出的導入語句。
next/image 改進
基於社區的反饋，此版本添加了一個新的實驗性函數unstable_getImgProps()，以支持不直接使用<Image>組件的高級用例，包括：
-
處理
background-image或image-set -
使用canvas的
context.drawImage()或new Image()時進行操作 -
使用
<picture>媒體查詢來實現藝術方向或明/暗模式圖片 -
利用
<picture>元素的媒體查詢功能，實現明/暗模式圖片的切換。
import { unstable_getImgProps as getImgProps } from 'next/image';
export default function Page() {
const common = { alt: 'Hero', width: 800, height: 400 };
const {
props: { srcSet: dark },
} = getImgProps({ ...common, src: '/dark.png' });
const {
props: { srcSet: light, ...rest },
} = getImgProps({ ...common, src: '/light.png' });
return (
<picture>
<source media="(prefers-color-scheme: dark)" srcSet={dark} />
<source media="(prefers-color-scheme: light)" srcSet={light} />
<img {...rest} />
</picture>
);
}
此外，現在placeholder屬性支持提供任意的data:image/作為占點陣圖像，這些圖像不會被模糊處理。
其他改進
自從13.4.0版本以來，我修複了超過438個錯誤，併進行了各種改進，包括：
-
[文檔] 關於表單和變異的新文檔
-
[文檔] 關於服務端和客戶端組件的新文檔
-
[文檔] 關於內容安全策略和非ces的新文檔
-
[文檔] 關於緩存和重新驗證的新文檔
-
[功能] 在頁面路由器中增加了對
next/navigation中的useParams和useSearchParams的支持，以便逐步採用 -
[功能] 在
router.push/router.replace上支持scroll: false -
[功能] 在
next/link上支持scroll={false} -
[功能] 開發環境支持HTTPS：
next dev --experimental-https -
[功能] 增加了對
cookies().has()的支持 -
[功能] 增加了對IPv6主機名的支持
-
[功能] App Router現在支持Yarn PnP
-
[功能] 伺服器操作中添加了對
redirect()的支持 -
[功能] 通過創建項目使用Bun的支持：
bunx create-next-app -
[功能] 中間件和邊緣運行時中的草稿模式支持
-
[功能] 現在中間件中支持
cookies()和headers() -
[功能] Metadata API現在在Twitter卡片中支持
summary_large_image -
[功能] RedirectType現在從
next/navigation導出 -
[功能] 添加了Playwright的實驗性測試模式
-
[改進] 重構了
next start，能夠處理比之前多達1062%的請求量 -
[改進] 優化了Next.js內部以提高冷啟動性能（速度提升高達40％，在Vercel上測試）
-
[改進] 對App Router增強了Jest支持
-
[改進] 重新設計了
next dev的輸出 -
[改進] 服務端操作現在與完全靜態路由一起工作（包括使用ISR重新驗證數據）
-
[改進] 服務端操作不再阻止路由之間的導航
-
[改進] 服務端操作不能再觸發多個併發操作
-
[改進] 調用r
edirect()的服務端操作現在將其推入歷史堆棧而不是替換當前條目，以確保返回按鈕正常工作 -
[改進] 服務端操作為防止瀏覽器緩存添加了
no-cache，no-storecache-control頭 -
[改進] 修複了導航後可能調用兩次服務端操作的錯誤
-
[改進] 提高了對具有服務端組件的Emotion CSS的支持
-
[改進] 支持
scroll-behavior: smooth用於哈希URL更改 -
[改進] 在所有瀏覽器中添加了
Array.prototype.at的Polyfill -
[改進] 修複了
next dev緩存處理多個並行請求時可能發生的競爭條件 -
[改進] 控制臺中的
fetch輸出現在顯示跳過緩存的請求（緩存：SKIP） -
[改進]
usePathname現在正確地去除了basePath -
[改進]
next/image現在在App Router中正確地預載入圖像 -
[改進]
not-found不再兩次渲染根佈局 -
[改進] 現在可以克隆
NextRequest（即new NextRequest(request)） -
[改進]
app/children/page.tsx現在正確地處理文字/children路由 -
[改進] 內容安全策略現在支持預初始化腳本的
nonce -
[改進] 使用
next/navigation中的重定向時現在支持basePath -
[改進] 在Static Export中使用不受支持功能時改進了錯誤消息
-
[改進] 改進了遞歸
readdir實現（速度提高了約3倍） -
[改進] 修複了動態路由段中fallback：false之前引起的掛起請求問題
-
[改進] 修複了在請求已被取消時將信號傳遞給重新驗證請求導致請求失敗的錯誤
-
[改進] 刪除了404頁面上的fetch輪詢，改為使用websocket事件，避免在運行
next dev時不必要的重新載入 -
[改進]
performance.measure不再會導致水合不匹配 -
[改進] 修複了在編輯
pages/_app時可能發生意外的完全重新載入的情況 -
[改進]
ImageResponse現在擴展自Response，以改善類型檢查 -
[改進] 在
next build中沒有頁面輸出時，不再顯示pages -
[改進] 修複了在
<Link>中忽略skipTrailingSlashRedirect的問題 -
[改進] 修複了開發模式下動態元數據路由重覆的問題
