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从新验证数据）
  • [改良] 服务端操作不再阻止路由之间的导航
  • [改良] 服务端操作不能再触发多个并发操作
  • [改良] 调用redirect()的服务端操作当初将其推入历史堆栈而不是替换以后条目，以确保返回按钮失常工作
  • [改良] 服务端操作为避免浏览器缓存增加了no-cache，no-store cache-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的问题
  • [改良] 修复了开发模式下动静元数据路由反复的问题