Next.js 13.5

Next.js 13.5 改进了本地开发性能和可靠性，具有以下特点：

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

立即升级并注册 Next.js Conf，10 月 26 日举行

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 相比，在新的应用程序上，我们看到了以下改进：

• 快 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
• 使用画布 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 现在可以在 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 中使用 Draft Mode 支持
• [功能] 中间件中现在支持 cookies() 和 headers()
• [功能] 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)）
• [改进] 字面 /children 路由的 app/children/page.tsx 现在可以正常工作
• [改进] 内容安全策略现在支持预初始化脚本的 nonce
• [改进] 来自 next/navigation 的 redirect 现在支持 basePath
• [改进] 修复了在 output: 'standalone' 模式下渲染期间 process.env 不可用的问题
• [改进] 改进了将 静态导出 与不支持的功能一起使用时的错误消息
• [改进] 改进了递归 readdir 实现（速度提升约 3 倍）
• [改进] 修复了动态路由段的 fallback: false 之前导致请求挂起的问题
• [改进] 修复了 signal 传递给重新验证请求的错误，导致在请求已中止时请求失败
• [改进] 取消了 404 页面上的 fetch 轮询，转而使用 websocket 事件，防止在运行 next dev 时不必要的重新加载
• [改进] performance.measure 不再可能导致 hydration 不匹配
• [改进] 修复了编辑 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, and @ikryvorotenko