Next.js 13.5

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

• 本地服务器启动速度提升 22%：在应用路由和页面路由中实现更快的迭代
• 热模块替换 (HMR) 速度提升 29%：保存更改时获得更快的响应
• 内存占用减少 40%：在运行 next start 时测得
• 优化的包导入：使用热门图标和组件库时更新更快
• next/image 改进：支持 <picture>、艺术指导 (Art Direction) 和暗黑模式
• 修复了超过 438 个错误！

立即升级并报名参加 10 月 26 日的 Next.js Conf：

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

启动和热模块替换时间优化

我们很高兴看到应用路由 (App Router) 的持续采用率，根据 HTTP Archive 抓取的前 1000 万来源数据显示，其月增长率已达到 80%。

自 Next.js 13.4 版本以来，我们一直专注于提升应用路由应用的性能和可靠性。对比 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 使用
• 配合 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 个错误并实现了多项改进，包括：

• [文档] 新增 表单与数据变更 文档
• [文档] 新增 服务端组件 和 客户端组件 文档
• [文档] 新增 内容安全策略与 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 支持
• [功能] 支持在服务器操作 (Server Actions) 中使用 redirect()
• [功能] 支持使用 Bun 创建项目：bunx create-next-app（文档）
• [功能] 支持在中间件和边缘运行时中使用草稿模式 (Draft Mode)
• [功能] 中间件中现在支持 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 重新验证数据）
• [优化] 服务器操作不再阻塞路由间的导航
• [优化] 服务器操作现在无法触发多个并发操作
• [优化] 服务器操作调用 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 不可用的问题
• [优化] 改进了使用静态导出时遇到不支持功能的错误提示
• [优化] 改进递归读取目录实现（约快 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 和 @ikryvorotenko