Next.js 15震撼发布:七大革命性更新,前端性能又又提升了

开发 前端
在新版本中,Next.js不再缓存fetch请求、GET路由处理程序和客户端导航🌐。这一变化有助于避免常见的缓存问题,确保我们的应用保持响应性和最新状态🚀。

作为领先的现代前端框架,Next.js 15引入了一系列创新功能和改进,旨在提高开发效率🚀并增强应用性能⚡。

图片图片

1.支持React 19 RC

Next.js 15版本现在支持React 19 RC,这意味着开发者可以立即体验React最新版本带来的新特性。React 19 RC在客户端和服务器端都引入了新功能,如Actions,这将大大简化我们的代码逻辑。

更新指南:

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

2. 实验性React编译器

React编译器是由Meta团队开发的实验性工具🛠️。它理解JavaScript语义和React规则,自动优化你的代码。这不仅提升了应用性能⚡,还简化了开发过程🎨。

安装 babel-plugin-react-compiler:

npm install babel-plugin-react-compiler

然后在next.config.js中配置 experimental.reactCompiler:

const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};

module.exports = nextConfig;

3. 部分预渲染

Next.js 15引入了名为部分预渲染的新布局和页面配置功能🏗️。这个实验性功能允许开发者逐步采用新的布局和页面配置,在控制页面渲染策略方面提供更大的灵活性🌐。

要使用部分预渲染功能,需要在 next.config.js 中设置配置:

const nextConfig = {
  experimental: {
    ppr: 'incremental',
  },
};

module.exports = nextConfig;

4. next/after API

另一项试验性实验性功能是 next/after,这是一个允许我们在响应完成流式传输后执行代码的API。这给了开发者更多的控制权,并能够更精细地管理应用生命周期⚙️。

要使用它,需要在 next.config.js 中配置 experimental.after:

const nextConfig = {
  experimental: {
    after: true,
  },
};

module.exports = nextConfig;

5. create-next-app更新

create-next-app工具也进行了更新,采用了现代设计并增加了新功能,如启用带有Turbopack的本地开发🌟。

运行 create-next-app,会出现一个新的提示,询问您是否要为本地开发启用Turbopack(默认为否)🚀。

要启用Turbopack,使用:

npx create-next-app@rc --turbo

6. 外部包捆绑

Next.js 15为Pages Router添加了新的配置选项,使外部包的捆绑更加灵活和强大。这将帮助我们更好地管理应用依赖项并提高应用加载速度。

捆绑外部软件包可以提高应用程序的冷启动性能。App Router 外部软件包默认捆绑在 ,您可以使用新的 serverExternalPackages 配置选项。

为了统一 APages 路由器之间的配置,我们引入了一个新选项 bundlePagesRouterDependencies 以匹配 App 路由器的默认自动捆绑。

const nextConfig = {
  // Automatically bundle external packages in the Pages Router:
  bundlePagesRouterDependencies: true,
  // Opt specific packages out of bundling for both App and Pages Router:
  serverExternalPackages: ['package-name'],
};

module.exports = nextConfig;

7. 缓存更新

在新版本中,Next.js不再缓存fetch请求、GET路由处理程序和客户端导航🌐。这一变化有助于避免常见的缓存问题,确保我们的应用保持响应性和最新状态🚀。

Next.js 15的发布无疑将为前端开发带来新的活力🎉。它不仅提高了开发效率🚀,还增强了应用性能和用户体验🌟。如果您是前端开发者,Next.js 15绝对值得一试。

责任编辑:武晓燕 来源: 大迁世界
相关推荐

2023-11-26 09:04:10

Vue性能

2023-09-20 10:14:03

Next.js前端

2021-06-09 06:35:26

iOS 15 App 苹果

2024-06-12 08:08:08

2023-10-27 15:13:12

Next.jsRust

2011-02-14 16:55:53

华为世界移动通信大会HiLink

2024-10-30 08:31:36

Next.js高效性能

2016-11-04 14:54:12

2023-10-05 09:40:06

Next.jsTurbopackVite

2013-03-30 22:22:34

Surface Pro

2024-07-31 08:38:36

2023-08-31 19:17:23

2023-01-20 08:00:00

Next.js图片组件

2010-05-26 17:26:36

SVN提交更新

2021-08-02 10:50:57

性能微服务数据

2024-09-04 10:27:53

2024-04-28 10:56:34

Next.jsWeb应用搜索引擎优化

2023-08-24 16:38:11

iOS 17苹果

2020-12-08 17:15:27

数据中心云计算IT

2012-03-07 09:10:49

Windows 8微软
点赞
收藏

51CTO技术栈公众号