Next.js 15 RC新特性速览
May 30, 2024
Next.js 15 RC版本已经发布,它带来了一系列令人兴奋的新特性和改进,为前端开发带来了新的风向。以下是Next.js 15 RC的一些亮点特性,让我们一起探索它们将如何影响我们的开发流程。
特性介绍
React 19 RC支持
Next.js 15 RC现在支持React 19 RC,这是React团队的重大更新。它包括了客户端和服务器端的新特性,例如Actions。这将允许开发者在React v19正式发布之前就使用并提供反馈。
React Compiler(实验性)
React Compiler是由Meta的React团队创建的一个新实验性编译器。它通过理解纯JavaScript语义和React规则,深入理解你的代码,从而自动优化代码。这减少了开发者需要手动进行的记忆化操作,简化了代码,使其更易于维护,减少了错误。介绍React Comppiler的文章挺多了,核心优化点就是后续可以不再大量使用memo等类似的hook了,react性能也会有很大的提升。
错误提醒优化
这个错误相信很多开发者都遇到过,通常反应是一脸懵,定位也很耗时。
Next.js 15 RC 改进后的效果:
缓存策略更新
Next.js 15对缓存策略进行了更新。fetch请求、GET路由处理器和客户端路由缓存现在默认不再缓存。如果需要保留之前的行为,可以继续选择使用缓存。
在之前的版本中, fetch请求、GET路由处理会被自动缓存,以提高性能。但在Next.js 15中,默认情况下不再进行这种自动缓存。这一变化使得开发者能够更加灵活地控制缓存行为,根据应用的具体需求来决定是否进行缓存以及如何进行缓存。
Next.js的缓存能力参考我之前的文章:《Next.js缓存能力》
对于仍然希望缓存fetch()请求的开发者,Next.js 15提供了一些其他手段,包括:
- 将单个 fetch 调用中的缓存选项设置为强制缓存(force-cache)
- 将单个路由的动态路由配置选项设置为“强制静态”(force-static)
- 将 fetchCache 路由配置选项设置为“默认缓存”(default-cache),以覆盖 Layout 或 Page 中的所有 fetch 请求,使其使用强制缓存,除非它们明确指定了自己的缓存选项
另外在 Next 14 中,使用 GET HTTP 方法的路由处理程序默认会被缓存,除非它们使用了动态函数或动态配置选项。在 Next.js 15 中,GET 函数默认不会被缓存。
你仍然可以通过使用静态路由配置选项(如导出 dynamic = 'force-static')来选择启用缓存。
像 sitemap.ts、opengraph-image.tsx、icon.tsx 等特殊路由处理程序以及其他元数据文件,除非它们使用动态函数或动态配置选项,否则它们默认仍然是静态的。
增量采用的部分预渲染(实验性)
Next.js 14引入了部分预渲染(PPR),这是一种在同一页面上结合静态和动态渲染的优化。Next.js 15通过添加experimental_ppr路由配置选项,允许特定布局和页面采用PPR。
Partial Prerendering(部分预渲染)是一种优化页面加载性能的方法,它是Client Side Rendering(客户端渲染)和Server Side Rendering(服务器端渲染)两种方法的结合体。在这种渲染方式下,页面的一部分(通常是对SEO和首次加载速度关键的部分)在服务器端进行渲染,而其他部分(通常是交互性强的部分)则在客户端进行渲染。
Partial Prerendering旨在将静态渲染的速度优势与动态个性化响应的灵活性相结合。它依靠React Suspense等技术来提供快速的初始静态响应,同时可以根据用户交互或其他触发器动态地替换组件。这种优化方式有助于加快页面加载速度,提高用户体验,并允许开发者在需要时保持页面的交互性。
在Next.js 14中,Partial Prerendering作为预览版功能被引入。开发者现在可以在Next.js 15中使用这个功能来优化他们的Web应用程序,并期望在将来得到更快、更可靠的性能。
next/after(实验性)
after()是一个新实验性API,它允许你在响应完成流式传输后安排工作,使得次要任务可以在不阻塞主响应的情况下运行。这对于日志记录、分析和其他外部系统同步等任务非常有用。
异步任务的执行,之前我在实现缓存的时候也吐槽过,next.js自己内部是有这个能力的,但是一直未开放给外部,或者与vercel平台深度绑定。现在终于放开了一部分。
create-next-app更新
Next.js 15对create-next-app进行了更新,提供了新的设计和一个新的标志来在本地开发中启用Turbopack。
外部包捆绑优化(稳定)
在App Router中,外部包默认被捆绑,并且可以使用新的serverExternalPackages配置选项来选择性地排除特定包。在Pages Router中,外部包默认不被捆绑,但可以使用现有的transpilePackages选项来指定要捆绑的包。
之前serverExternalPackages 为实验特性,新版本中进入stable。
如何升级
要从Next.js 14升级到Next.js 15,你可以按照以下步骤操作:
1. 更新依赖项
使用你偏好的包管理器运行以下命令来安装Next.js 15 RC版本以及相关的React和React DOM的RC版本:
或者如果你使用Yarn:
或者如果你使用pnpm:
或者如果你使用Bun:
2. 升级TypeScript类型定义(如果使用TypeScript)
确保你也将@types/react和@types/react-dom升级到最新版本。
3. 更新fetch请求的缓存行为
在Next.js 15中,默认情况下不再缓存fetch请求。要将特定的fetch请求加入缓存,可以通过传递cache: 'force-cache'选项来实现:
4. 更新路由处理器的缓存行为
GET路由处理器函数默认不再缓存。要启用缓存,可以在路由处理器文件中使用export dynamic = 'force-static'配置选项:
5. 客户端路由缓存
通过<Link>或useRouter导航时,默认不再重用客户端路由缓存中的页面片段。要启用页面片段的缓存,可以使用staleTimes配置选项:
6. 更新next/font包
@next/font包已被移除,取而代之的是内置的next/font。你可以使用提供的codemod自动重命名你的导入:
7. 更新bundlePagesRouterDependencies配置
experimental.bundlePagesExternals现在已稳定,并更名为bundlePagesRouterDependencies:
8. 更新serverExternalPackages配置
experimental.serverComponentsExternalPackages现在已稳定,并更名为serverExternalPackages:
9. 更新Speed Insights
Next.js 15中移除了Speed Insights的自动集成。要继续使用Speed Insights,请按照Vercel Speed Insights快速入门指南操作。
按照这些步骤,你应该能够从Next.js 14平滑升级到Next.js 15。记得在升级过程中检查你的项目是否有任何不兼容的更改,并根据需要进行调整。
总结
从RC的特性上看,Next.js还是挺重视社区反馈的。之前我所见到的两类比较多的吐槽点:
- 大量的默认行为导致难以理解。比如fetch的默认缓存,如果对next.js的缓存逻辑不理解,很容易弄出bug。这对新人很不友好。
- 与vercel的深度绑定。虽然会带动vercel的发展,但是对next.js的长期发展不利。
新版本在这些方面做了一些改进,希望后续next.js能有更好的发展。