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：

npm install babel-plugin-react-compiler

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

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

module.exports = nextConfig;

React 19 支持

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

更好的 hydration 错误

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

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

v15 之前：

现在：

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

3. 新的缓存行为

不再自动缓存！

对于所有：

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

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

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

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

4. 部分预渲染（PPR）

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

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

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中添加这个：

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

module.exports = nextConfig;

5.next/after

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

• 必要：身份验证检查，数据库更新等
• 非必要：日志记录，分析等

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开始使用：

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

module.exports = nextConfig;

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

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

以上关于Next.js 15发布，让你惊叹的5大特性全解析的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。