Next.js 15 RC 新特性详细介绍

Posted on:2024年6月6日 at 15:46

2024年5月23日，Next.js 15 Release Candidate（RC）现已发布。这个早期版本让开发者能够在即将发布的稳定版之前测试最新特性。以下是Next.js 15 RC的一些重要更新和新特性。

支持 React 19 RC

Next.js 15 RC 现在支持 React 19 RC，这包括了客户端和服务器的新功能，如 Actions。由于Next.js的应用路由器是基于React的canary channel，开发者可以在React v19发布之前使用并反馈这些新API。

React 编译器（实验性）

React 编译器是由Meta的React团队创建的实验性编译器。这个编译器通过理解纯JavaScript语义和React规则，能够自动优化代码，减少开发者手动使用useMemo和useCallback的需求，使代码更简单、易维护且更不容易出错。

要在Next.js 15中使用React编译器，需要安装babel-plugin-react-compiler插件，并在next.config.js中启用reactCompiler选项。

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

module.exports = nextConfig;

Hydration 错误改进

Next.js 15对hydration错误视图进行了改进，现在错误消息会显示错误的源代码并提供解决建议。

缓存更新

Next.js 15对缓存机制进行了重新评估。现在，默认情况下，fetch请求、GET路由处理程序和客户端导航不再被缓存。如果需要缓存，可以手动配置。

fetch 请求不再默认缓存

在Next.js 14中，如果没有提供缓存选项，默认会使用force-cache。而在Next.js 15中，默认会使用no-store，即不缓存请求结果。

fetch("https://...", { cache: "force-cache" | "no-store" });

GET 路由处理程序不再默认缓存

同样的，GET路由处理程序在Next.js 15中也不再默认缓存，可以使用静态路由配置选项如force-static进行缓存。

客户端路由缓存

Next.js 15更改了客户端路由缓存行为，默认情况下Page组件不会被缓存。可以通过设置staleTimes配置项来恢复以前的行为。

const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
    },
  },
};

module.exports = nextConfig;

部分预渲染（实验性）

部分预渲染（Partial Prerendering，PPR）允许在同一页面上结合静态和动态渲染。Next.js 15引入了experimental_ppr配置选项，支持增量采用PPR。

app/page.jsx

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/after（实验性）

after()是一个新实验API，允许在响应完成后执行代码，这对于日志记录、分析和外部系统同步等次要任务非常有用。

import { unstable_after as after } from "next/server";
import { log } from "@/app/utils";

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

  // 主要任务
  return <>{children}</>;
}

create-next-app 更新

Next.js 15对create-next-app进行了更新，包括新设计和启用Turbopack的提示。

npx create-next-app@rc --turbo

外部包的优化打包（稳定）

Next.js 15引入了新的配置选项，用于统一App和Pages路由器的外部包打包行为。可以使用serverExternalPackages选项来选择不打包的特定包。

const nextConfig = {
  bundlePagesRouterDependencies: true,
  serverExternalPackages: ["package-name"],
};

module.exports = nextConfig;

其他变化