Next.js 13.5

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

• 本地服务器启动速度提升 22%： 使用 App 和 Pages 路由器更快地迭代
• 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 路由器持续被采用，在查看 HTTP Archive 爬取的前 1000 万个来源时，每月增长率达到 80%。

从 Next.js 13.4 开始，我们的重点一直放在改进 App 路由器应用程序的性能和可靠性。比较 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 现在可以在页面路由器中使用，以便逐步采用
• [功能] 支持 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() 现在支持在中间件中使用
• [功能] 元数据 API 现在支持 Twitter 卡片中的 summary_large_image
• [功能] RedirectType 现在从 next/navigation 中导出
• [功能] 为 Playwright 添加了实验性测试模式（文档）
• [改进] 重构了 next start 以处理 1062% 更多的请求/秒
• [改进] 优化了 Next.js 内部机制以改善冷启动（在 Vercel 上测试，速度提高了 40%）
• [改进] 更好的 Jest 对 App Router 的支持（PR）
• [改进] 重新设计了 next dev 输出（PR）
• [改进] 服务器操作现在可以与完全静态路由一起使用（包括使用 ISR 重新验证数据）
• [改进] 服务器操作不再阻止路由之间的导航
• [改进] 服务器操作不再能够触发多个并发操作
• [改进] 服务器操作调用 redirect() 现在会推送到历史堆栈而不是替换当前条目，以确保后退按钮正常工作
• [改进] 服务器操作添加 no-cache, no-store cache-control 标头以防止浏览器缓存
• [改进] 修复了一个错误，该错误会导致导航后服务器操作被调用两次
• [改进] 改进了对服务器组件使用 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 不可用的问题
• [改进] 改进了在使用不支持的功能进行 静态导出 时的错误消息
• [改进] 改进了递归 readdir 实现（速度提高了约 3 倍）
• [改进] 修复了动态路由段中 fallback: false 之前会导致请求挂起的问题
• [改进] 修复了一个错误，该错误将 signal 传递给重新验证请求，导致请求在已中止时失败
• [改进] 移除 404 页面上的 fetch 轮询，转而使用 websocket 事件，防止在运行 next dev 时发生不必要的重新加载
• [改进] performance.measure 不再会导致水合不匹配
• [改进] 修复了编辑 pages/_app 时可能发生意外完全重新加载的情况
• [改进] ImageResponse 现在扩展了 Response 以改进类型检查（PR）
• [改进] 当 next build 中没有 pages 输出时，不再显示 pages
• [改进] 修复了 skipTrailingSlashRedirect 在 <Link> 中被忽略的问题
• [改进] 修复了开发模式下重复的动态元数据路由

贡献者

Next.js 是超过 2800 位独立开发者、谷歌和 Meta 等行业合作伙伴以及我们在 Vercel 的核心团队共同努力的结果。加入社区，参与 GitHub 讨论、Reddit 和 Discord。

此版本由以下人员提供

• Next.js 团队：Andrew，Balazs，贾驰，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