Next.js 13.5

Next.js 13.5 透過以下方式改善本機開發效能和可靠性

本機伺服器啟動速度加快 22%： 使用 App & Pages Router 更快地迭代
HMR（快速重新整理）速度加快 29%： 在儲存變更時實現更快的迭代
記憶體使用量減少 40%： 在執行 next start 時測量
最佳化套件匯入： 使用熱門圖示和元件庫時更新速度更快
next/image 改善： <picture>、美術指導和黑暗模式支援
以及修補超過 438 個錯誤！

立即升級並註冊 10 月 26 日的 Next.js Conf

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

改善啟動和快速重新整理時間

我們很高興看到 App Router 的持續採用，現在在 HTTP Archive 抓取的排名前 1000 萬個來源中，每月成長 80%。

2023 CRuX Dataset for Top 1 Million Mobile Sites on the Web

自 Next.js 13.4 以來，我們的重點一直放在改善 App Router 應用程式的效能和可靠性。比較 13.4 和 13.5，我們在新應用程式上看到了以下改進

本機伺服器啟動速度加快 22%
HMR（快速重新整理）速度加快 29%
記憶體使用量減少 40%

我們能夠透過以下最佳化實現此效能提升

透過快取或最小化慢速操作來減少工作量
最佳化昂貴的檔案系統操作
編譯期間更好的增量樹狀結構遍歷
將不必要的封鎖同步呼叫移動為延遲載入
自動設定大型圖示庫

Next.js 使用者 Lattice 回報，在他們的測試中，編譯速度提高了 87-92%。

在我們繼續迭代並改善目前捆綁器效能的同時，我們也在並行開發 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 等程式庫，僅載入您實際使用的模組，同時仍讓您方便地編寫具有許多具名匯出的 import 陳述式。

檢視 PR 或深入瞭解我們文件中的 optimizePackageImports。

`next/image` 改善

根據社群意見回饋，我們新增了一個新的實驗性函式 unstable_getImgProps()，以支援不直接使用 <Image> 元件的進階使用案例，包括

使用 background-image 或 image-set
使用畫布 context.drawImage() 或 new Image()
使用 <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/ (示範)。

深入瞭解我們文件中的 next/image。

其他改進

自 13.4.0 以來，我們已修復超過 438 個錯誤，並進行了各種改進，包括

[文件] 關於表單和變更的新文件
[文件] 關於伺服器和用戶端元件的新文件
[文件] 關於內容安全策略和 Nonce 的新文件
[文件] 關於快取和重新驗證的新文件
[功能] 來自 next/navigation 的 useParams 和 useSearchParams 現在可在 Pages Router 中用於逐步採用
[功能] 支援 router.push / router.replace 上的 scroll: false
[功能] 支援 next/link 上的 scroll={false}
[功能] 開發的 HTTPS 支援：next dev --experimental-https
[功能] 新增對 cookies().has() 的支援 (文件)
[功能] 新增對 IPv6 主機名稱的支援
[功能] 新增對搭配 App Router 使用 Yarn PnP 的支援
[功能] 新增對 Server Actions 中 redirect() 的支援
[功能] 新增對搭配 Bun 使用建立專案的支援：bunx create-next-app (文件)
[功能] 中介軟體和 Edge Runtime 內使用的草稿模式支援
[功能] 中介軟體內現在支援 cookies() 和 headers()
[功能] Metadata API 現在支援 Twitter 卡片中的 summary_large_image
[功能] RedirectType 現在從 next/navigation 匯出
[功能] 為 Playwright 新增實驗性測試模式 (文件)
[改進] 重構 next start 以處理每秒多 1062% 的請求
[改進] 最佳化 Next.js 內部結構以改善冷啟動（速度最多快 40%，在 Vercel 上測試）
[改進] 針對 App Router 更好的 Jest 支援 (PR)
[改進] 重新設計 next dev 輸出 (PR)
[改進] Server Actions 現在可搭配完全靜態路由運作（包括使用 ISR 重新驗證資料）
[改進] Server Actions 不再封鎖路由之間的導覽
[改進] Server Actions 無法再觸發多個並行動作
[改進] 呼叫 redirect() 的 Server Actions 現在會推送到歷史堆疊中，而不是取代目前項目，以確保返回按鈕可運作
[改進] Server Actions 新增 no-cache, no-store cache-control 標頭以防止瀏覽器快取
[改進] 修復了在導覽後可能會呼叫兩次 Server Actions 的錯誤
[改進] 針對搭配 Server Components 使用 Emotion CSS 改善的支援
[改進] 針對雜湊網址變更的 scroll-behavior: smooth 支援
[改進] 在所有瀏覽器中新增 Array.prototype.at 的 Polyfill
[改進] 修復了處理多個並行請求時 next dev 快取中的競爭條件
[改進] 主控台中的 fetch 輸出現在顯示使用 cache: SKIP 跳過快取的請求
[改進] usePathname 現在正確地移除 basePath
[改進] next/image 現在正確地預先載入 App Router 中的影像
[改進] not-found 不再轉譯根版面配置兩次
[改進] NextRequest 現在可以複製 (即 new NextRequest(request))
[改進] app/children/page.tsx 現在適用於文字 /children 路由
[改進] 內容安全策略現在支援預先初始化的指令碼的 nonce
[改進] 從 next/navigation 使用 redirect 現在支援 basePath
[改進] 修復了在 output: 'standalone' 模式中轉譯期間無法使用 process.env 的錯誤
[改進] 在搭配不支援的功能使用靜態匯出時，改善了錯誤訊息
[改進] 改善了遞迴 readdir 實作 (~3 倍速度提升)
[改進] 修復了先前導致擱置請求的動態路由區段的 fallback: false
[改進] 修復了將 signal 傳遞至重新驗證請求的錯誤，導致在請求已中止時請求失敗
[改進] 移除 404 頁面上的 fetch 輪詢，改用 websocket 事件，防止在執行 next dev 時發生不必要的重新載入
[改進] performance.measure 不再可能導致水合不符
[改進] 修復了編輯 pages/_app 時可能發生意外完整重新載入的情況
[改進] ImageResponse 現在擴充 Response 以改善類型檢查 (PR)
[改進] 當 next build 中沒有 pages 輸出時，不再顯示 pages
[改進] 修復了 <Link> 中忽略 skipTrailingSlashRedirect 的問題
[改進] 修復了開發模式中重複的動態中繼資料路由

貢獻者

Next.js 是超過 2,800 位個別開發人員、Google 和 Meta 等產業合作夥伴以及 Vercel 核心團隊共同努力的成果。加入 GitHub Discussions、Reddit 和 Discord 社群。

此版本由以下人員推出

Next.js 團隊：Andrew、Balazs、Jiachi、Jimmy、JJ、Josh、Sebastian、Shu、Steven、Tim、Wyatt 和 Zack。
Turbopack 團隊：Donny、Justin、Leah、Maia、OJ、Tobias 和 Will。

以及以下人員的貢獻：@opnay、@vinaykulk621、@goguda、@coreyleelarson、@bencmbrook、@cramforce、@williamli、@stefanprobst、@feugy、@Kikobeats、@dvoytenko、@MaxLeiter、@devjiwonchoi、@lacymorrow、@kylemcd、@tibi1220、@iamarpitpatidar、@pythagoras-yamamoto、@alexkirsz、@jsteele-stripe、@tknickman、@gaojude、@janicklas-ralph、@ericfennis、@JohnAdib、@MiLk、@delbaoliveira、@leerob、@LuudJanssen、@lucasconstantino、@davecarlson、@colinhacks、@jantimon、@Banbarashik、@ForsakenHarmony、@arturbien、@gnoff、@hsrvms、@DuCanhGH、@tim-hanssen、@Aryan9592、@rishabhpoddar、@Lantianyou、@joulev、@AkifumiSato、@trigaten、@HurSungYun、@DevLab2425、@SukkaW、@daniel-web-developer、@ky1ejs、@wyattjoh、@ShaunFerris、@syedtaqi95、@Heidar-An、@Jeffrey-Zutt、@Ryan-Dia、@steppefox、@hiro0218、@rjsdnql123、@fgiuliani、@steven-tey、@AntoineBourin、@adamrhunter、@darshanjain-entrepreneur、@s0h311、@djreillo、@dijonmusters、@cassidoo、@anonrig、@gfgabrielfranca、@Bitbbot、@BrennanColberg、@Nick-Mazuk、@thomasballinger、@lucgagan、@nroland013、@SonMooSans、@jenewland1999、@thorwebdev、@jyunhanlin、@Gnadhi、@yagogmaisp、@carlos-menezes、@ryo-manba、@vamcs、@matepapp、@SleeplessOne1917、@ecklf、@karlhorky、@starunaway、@FernandVEYRIER、@Terro216、@anthonyshew、@suhaotian、@simonswiss、@feikerwu、@lubakravche、@masnormen、@bottxiang、@mhmdrioaf、@tyler-lutz、@vincenthongzy、@yigithanyucedag、@doinki、@danger-ahead、@bre30kra69cs、@Yash-Singh1、@krmeda、@bigyanse、@2-NOW、@Mingyu-Song、@morganfeeney、@aralroca、@nickmccurdy、@adamjmcgrath、@angel1254mc、@cxa、@ibash、@mohanraj-r、@kevinmitch14、@iaurg、@steebchen、@Cow258、@charlesbdudley、@tyhopp、@Drblessing、@milovangudelj、@jacobsfletch、@JoshuaKGoldberg、@zignis、@ChristianIvicevic、@mrxbox98、@oliviertassinari、@fsansalvadore、@tvthatsme、@dvakatsiienko、@brunoeduardodev、@sonam-serchan、@vicsantizo、@leodr、@wiscaksono、@hustLer2k、@joshuabaker、@shozibabbas、@omarhoumz、@jamespearson、@tristndev、@AldeonMoriak、@manovotny、@mirismaili、@SuttonJack、@jeremydouglas、@JanCizmar、@mltsy、@WilderDev、@Guilleo03、@Willem-Jaap、@escwxyz、@wiredacorn、@Ethan-Arrowood、@BaffinLee、@greatSumini、@ciruz、@kijikunnn、@DustinsCode、@riqwan、@joostdecock、@nikolovlazar、@Bowens20832、@JohnAlbin、@gidgudgod、@maxproske、@dunklesToast、@yyuemii、@mPaella、@mknichel、@niko20、@mkcy3、@valentinpolitov、@smaeda-ks、@keyz、@Schniz、@koba04、@jiwooIncludeJeong、@ethanmick、@didemkkaslan、@itsmingjie、@v1k1、@thepatrick00、@taylorbryant、@kvnang、@alainkaiser、@simPod、@svarunid、@pauek、@lycuid、@MarkAtOmniux、@darshkpatel、@johnta0、@devagrawal09、@ibrahemid、@JesseKoldewijn、@javivelasco、@05lazy、@alexanderbluhm、@Fonger、@souporserious、@DevEsteves、@sanjaiyan-dev、@g12i、@cesarkohl、@josh、@li-jia-nan、@gabschne、@akd-io、@runjuu、@jocarrd、@nnnnoel、@ferdingler 和 @ikryvorotenko

改善啟動和快速重新整理時間

最佳化套件匯入

next/image 改善

其他改進

貢獻者

`next/image` 改善