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 万的来源中，App Router 的使用量实现了 环比增长 80%。

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

自 Next.js 13.4 以来，我们的重点一直是提升 App Router 应用程序的性能和可靠性。对比 13.4 和 13.5，我们在新应用程序上看到了以下改进：

提升 22% 本地服务器启动速度
提升 29% HMR (快速刷新) 速度
减少 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 prop 现在支持为不应模糊的占位符图像提供任意 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 中使用
[功能] cookies() 和 headers() 现在在 Middleware 中受支持
[功能] Metadata 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 可能被调用两次的错误
[改进] 改进了 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 不可用的问题
[改进] 改进了在使用静态导出和不支持的功能时的错误消息
[改进] 改进了递归 readdir 实现（速度提升约 3 倍）
[改进] 修复了 fallback: false 与动态路由段先前导致请求挂起的问题
[改进] 修复了 signal 传递给重新验证请求的错误，导致请求在已中止时失败
[改进] 移除了 404 页面上的 fetch 轮询，改为使用 websocket 事件，防止在运行 next dev 时不必要的重新加载
[改进] performance.measure 不再可能导致 hydration mismatch
[改进] 修复了编辑 pages/_app 时可能发生意外完全重新加载的情况
[改进] ImageResponse 现在扩展了 Response，以改进类型检查 (PR)
[改进] 当 next build 中没有 pages 输出时，不再显示 pages
[改进] 修复了 skipTrailingSlashRedirect 在 <Link> 中被忽略的问题
[改进] 修复了开发模式下重复的动态元数据路由

贡献者

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