Next.js 13.5

Next.js 13.5 通过以下改进提升了本地开发性能和可靠性：

本地服务器启动速度提升 22%： 使用 App & Pages Router 更快地迭代
HMR（快速刷新）速度提升 29%： 保存更改时迭代更快
内存使用量减少 40%： 在运行 next start 时测量
优化包导入： 使用流行图标和组件库时更新更快
next/image 改进： 支持 <picture>、艺术方向和暗模式
并修复了超过 438 个 Bug！

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 到 13.5，我们一直致力于提升 App Router 应用的性能和可靠性。在新应用上，我们看到了以下改进：

本地服务器启动速度 加快 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
使用 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 个 Bug 并进行了多项改进，包括：

[文档] 关于表单和修改的新文档
[文档] 关于服务器和客户端组件的新文档
[文档] 关于内容安全策略和 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（文档）
[功能] 草稿模式支持在中间件和 Edge Runtime 中使用
[功能] cookies() 和 headers() 现在在中间件中受支持
[功能] 元数据 API 现在支持 Twitter 卡片中的 summary_large_image
[功能] RedirectType 现在从 next/navigation 导出
[功能] 添加了 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 可能被调用两次的 Bug
[改进] 改进了 Server Components 对 Emotion CSS 的支持
[改进] 支持哈希 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 不可用的 Bug
[改进] 改进了使用不支持功能的静态导出时的错误消息
[改进] 改进了递归 readdir 实现（速度提升约 3 倍）
[改进] 修复了以前导致请求挂起的动态路由段的 fallback: false 问题
[改进] 修复了向重新验证请求传递 signal 时导致请求在中止后失败的错误
[改进] 移除了 404 页面上的 fetch 轮询，转而使用 websocket 事件，从而防止在运行 next dev 时不必要的重新加载
[改进] performance.measure 不再导致水合不匹配
[改进] 修复了编辑 pages/_app 时可能发生意外完全重新加载的情况
[改进] ImageResponse 现在扩展了 Response 以改进类型检查（PR）
[改进] 当 next build 中没有 pages 输出时，不再显示 pages
[改进] 修复了 <Link> 中 skipTrailingSlashRedirect 被忽略的 Bug
[改进] 修复了开发模式下动态元数据路由重复的 Bug

贡献者

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` 改进