新版Next.js 15中5个令人惊叹的特性

前端岗位内推来了

Next.js 15已经到来,一切比以往更好!

从全新的编译器到700倍更快的构建时间,创建具有卓越性能的全栈Web应用从未如此简单。

让我们探索v15的最新特性:

1. create-next-app升级:更清晰的UI,700倍更快的构建

改进的设计

从这样:

变成这样:

Webpack → Turbopack

Turbopack:世界上最快的模块打包器(至少他们是这么说的):

  • 比Webpack快700倍

  • 比Vite快10倍

现在在v15中,将其添加到你的Next.js项目比以往任何时候都更容易:

2. React编译器,React 19支持,和用户友好的错误提示

React编译器就是一个React编译器(谁能想到呢)。

一个深入理解你的React代码的现代编译器。

带来诸如自动记忆化等优化------在绝大多数情况下消除了对 useMemo 和 useCallback 的需求。

节省时间,防止错误,加快速度。

而且设置非常简单:你只需安装babel-plugin-react-compiler

go 复制代码
npm install babel-plugin-react-compiler

然后在next.config.js中添加这个

go 复制代码
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};

module.exports = nextConfig;
React 19支持

带来了客户端和服务器端Actions等升级。

更好的hydration错误

开发体验意味着很多,错误消息的有用性在其中扮演着重要角色。

Next.js 15设置了更高的标准:现在对可能的错误修复方法提供智能建议。

v15之前:

现在:

你知道我过去因这些hydration错误遇到过困难,所以这对我来说肯定会是一个无价之宝。

3. 新的缓存行为

不再自动缓存!

对于所有:

  • fetch() 请求

  • 路由处理程序:GETPOST

  • <Link> 客户端导航。

但如果你仍然想要缓存fetch()

go 复制代码
// 'cache' 在 v15 之前默认是 'no-store'
fetch('https://example.com', { cache: 'force-cache' });

然后你可以通过一些next.config.js选项缓存其他内容。

4. 部分预渲染(PPR)

PPR在同一页面中结合了静态和动态渲染。

通过立即加载静态HTML并在同一HTTP请求中流式传输动态部分,大大提高了性能。

go 复制代码
import { Suspense } from 'react';
import {
  StaticComponent,
  DynamicComponent,
} from '@app/ui';

export const experimental_ppr = true;

export default function Page() {
  return (
    <>
      <StaticComponent />
      <Suspense fallback={...}>
        <DynamicComponent />
      </Suspense>
    </>
  );
}

你只需要在next.config.js中添加这个:

go 复制代码
const nextConfig = {
  experimental: {
    ppr: 'incremental',
  },
};

module.exports = nextConfig;
5.next/after

Next.js 15为你提供了一种清晰的方式来分离每个服务器请求中的必要和非必要任务

  • 必要:身份验证检查,数据库更新等

  • 非必要:日志记录,分析等

go 复制代码
import { unstable_after as after } from 'next/server';
import { log } from '@app/utils';

export default function Layout({ children }) {
  // 次要任务
  after(() => {
    log();
  });

  // 主要任务
  // 从数据库中获取(fetch())数据并渲染
  return <>{children}</>;
}

现在就用experimental.after开始使用:

go 复制代码
const nextConfig = {
  experimental: {
    after: true,
  },
};

module.exports = nextConfig;

这只是Next.js 15中所有影响深远的新特性中的5个。

现在就用npx create-next-app@rc获取它,开始享受显著改善的构建时间和更优秀的开发者体验。

最后:

CSS技巧与案例详解

vue2与vue3技巧合集

VueUse源码解读

相关推荐
天天扭码10 分钟前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
Cao12345678932114 分钟前
简易学生成绩管理系统(C语言)
c语言·开发语言
The Future is mine16 分钟前
C# new Bitmap(32043, 32043, PixelFormat.Format32bppArgb)报错:参数无效,如何将图像分块化处理?
开发语言·c#
亿坊电商19 分钟前
PHP框架在微服务迁移中能发挥什么作用?
开发语言·微服务·php
烁34719 分钟前
每日一题(小白)模拟娱乐篇33
java·开发语言·算法
小希爸爸30 分钟前
4、中医基础入门和养生
前端·后端
kooboo china.33 分钟前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
坐吃山猪38 分钟前
Python-Agent调用多个Server-FastAPI版本
开发语言·python·fastapi
uhakadotcom39 分钟前
Fluid:云原生数据加速与管理的简单入门与实战
前端
88号技师39 分钟前
【1区SCI】Fusion entropy融合熵,多尺度,复合多尺度、时移多尺度、层次 + 故障识别、诊断-matlab代码
开发语言·机器学习·matlab·时序分析·故障诊断·信息熵·特征提取