前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【总结】2066- Next.js 15 来了,全新的编译器、700倍的构建速度提升

【总结】2066- Next.js 15 来了,全新的编译器、700倍的构建速度提升

作者头像
pingan8787
发布2024-06-08 08:29:58
900
发布2024-06-08 08:29:58
举报
文章被收录于专栏:前端自习课前端自习课

在最近的 Vercel 峰会上,Next.js 团队宣布了 Next.js 15 版本中的一些重要更新和新特性。这些更新旨在提升开发者的开发体验,加快应用的性能。同时 Vercel 也推出了一些人工智能相关的新功能,如可以流式输出代码的AI助手。

全新的编译器、700倍的构建速度提升,创建高性能的全栈Web应用从未如此轻松。

1、create-next-app 升级:更简洁的UI,700倍更快的构建速度

  • Webpack 升级为 Turbopack:世界上最快的模块打包器(官方如此宣称):比 Webpack 快 700 倍比 Vite 快 10 倍
  • 随着 v15 的发布,将 Turbopack 添加到你的 Next.js 项目中变得前所未有的简单:
代码语言:javascript
复制
npx create-next-app@rc

这个命令不仅会帮你生成一个新的 Next.js 项目,还会自动配置好 Turbopack,让你直接体验极速构建的快感。

2. React 编译器、React 19 支持和更友好的错误提示

React 编译器是一个现代的 React 编译器,它能深入理解你的 React 代码,带来自动记忆化等优化,大多数情况下不再需要手动使用 useMemo 和 useCallback。它可以节省时间、预防错误、加快速度。

并在 next.config.js 中添加:

React 19 支持:

引入了客户端和服务器端的 Actions。

更好的水合错误处理:

开发过程中的错误信息非常重要,Next.js 15 提供了智能的错误修复建议,这对开发者的开发体验有很大提升。

以前的错误提示:

现在的错误提示:

这些智能提示大大减少了开发者解决错误的时间。

3. 新的缓存行为

在 Next.js 15 中,不再自动缓存以下内容:

  • fetch() 请求
  • 路由处理程序:GET、POST 等
  • <Link> 客户端导航

如果你仍然希望缓存 fetch() 请求,可以在 next.config.js 中进行配置:

4. next/after:任务分离的新方式

Next.js 15 提供了一个全新的 next/after 功能,让你在每个服务器请求中清晰地分离必要任务和非必要任务:

  • 必要任务:身份验证检查、数据库更新等
  • 非必要任务:日志记录、分析等

现在你可以使用 experimental.after 轻松实现这一功能:

5、部分预渲染 (Partial Prerendering, PPR)

部分预渲染 (PPR) 在同一页面中结合了静态和动态渲染。通过即时加载静态 HTML 并在同一 HTTP 请求中流式传输动态部分,极大地提升了性能。

要启用 PPR,只需在 next.config.js 中添加以下配置:

结束

Next.js 15 带来了诸多令人兴奋的新功能和性能提升,让开发者可以更高效地构建高性能的全栈Web应用。如果你还没有体验过这些新特性,现在就开始吧!

代码语言:javascript
复制
npx create-next-app@rc

这就是 Next.js 15 带来的五大变革性新功能。你是否已经迫不及待想要试试这些新特性了呢?欢迎在评论区分享你的体验和看法!

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2024-06-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端自习课 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、create-next-app 升级:更简洁的UI,700倍更快的构建速度
  • 2. React 编译器、React 19 支持和更友好的错误提示
  • 3. 新的缓存行为
  • 4. next/after:任务分离的新方式
  • 5、部分预渲染 (Partial Prerendering, PPR)
  • 结束
相关产品与服务
多因子身份认证
多因子身份认证(Multi-factor Authentication Service,MFAS)的目的是建立一个多层次的防御体系,通过结合两种或三种认证因子(基于记忆的/基于持有物的/基于生物特征的认证因子)验证访问者的身份,使系统或资源更加安全。攻击者即使破解单一因子(如口令、人脸),应用的安全依然可以得到保障。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档