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%。

自 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 等庫會自動優化，僅載入您實際使用的模組，同時仍保留使用多個命名匯入的便利寫法。

查看 PR 或在我們的文件中 了解更多 關於 optimizePackageImports 的資訊。

next/image 改進

根據社群回饋，我們新增了一個實驗性函式 unstable_getImgProps() 來支援不直接使用 <Image> 元件的高級用例，包括：

• 與 background-image 或 image-set 配合使用
• 與 canvas 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 個錯誤並進行了多項改進，包括：

• [文件] 新增關於 表單與變異 的文件
• [文件] 新增關於 伺服器元件 和 客戶端元件 的文件
• [文件] 新增關於 內容安全政策與 Nonces 的文件
• [文件] 新增關於 快取 和 重新驗證 的文件
• [功能] 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 (文件)
• [功能] 支援在 Middleware 和 Edge Runtime 中使用草稿模式
• [功能] 現在 Middleware 中支援使用 cookies() 和 headers()
• [功能] Metadata API 現在支援 Twitter 卡片中的 summary_large_image
• [功能] 現在從 next/navigation 匯出 RedirectType
• [功能] 新增 Playwright 的實驗性測試模式 (文件)
• [改進] 重構 next start 以處理每秒 1062% 更多的請求
• [改進] 優化 Next.js 內部實現以改善冷啟動速度 (在 Vercel 上測試最高提升 40%)
• [改進] 為 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 的支援
• [改進] 支援 hash URL 變更的 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