介绍

Next.js 15 作为稳定版本发布，提供 React 19 支持、重新设计的缓存模型以及针对异步请求处理的主要 API 改进。此版本默认对获取请求和 GET 路由处理程序无缓存，从而简化了行为可预测性。它还引入了 cookies()、headers() 和 params() 的 async 变体，与 React 19 的异步渲染范例保持一致。本文涵盖了生产采用的每一项重大变更和最佳实践。

React 19 稳定兼容

Next.js 15 与 React 19 stable 配对，使新的 React Compiler 能够自动记忆组件和钩子。在许多情况下，这消除了手动 useMemo、useCallback 和 React.memo 的需要。

要选择加入 React 编译器：

// next.config.ts
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};
export default nextConfig;

完全支持新的 React 19 API，例如 use() （直接在渲染中读取 Promise）和带有 "use server" 的服务器操作。

缓存默认值已更改

在 Next.js 14 中，默认情况下会缓存 fetch 请求。在 Next.js 15 中，默认情况下不会缓存获取请求 — 您必须明确选择加入：

// Next.js 15 — NOT cached unless specified
const data = await fetch('https://api.example.com/data');

// Opt into caching
const cached = await fetch('https://api.example.com/data', {
  cache: 'force-cache',
});

默认情况下，GET 路由处理程序还返回动态响应。使它们静态：

// app/api/data/route.ts
export const dynamic = 'force-static';

此更改减少了动态应用程序中的意外行为，并符合 渐进增强 的原则。

异步请求 API：cookies()、headers()、params()

Next.js 15 需要请求时 API 的 async 访问权限：

// app/dashboard/page.tsx
import { cookies } from 'next/headers';

export default async function Page() {
  const cookieStore = await cookies();
  const token = cookieStore.get('session');
  // ...
}

这同样适用于 headers()：

import { headers } from 'next/headers';

export default async function Page() {
  const headersList = await headers();
  const userAgent = headersList.get('user-agent');
}

动态路由 params 现在是异步的：

// app/blog/[slug]/page.tsx
export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  return <div>Post: {slug}</div>;
}

这一变化可以实现更好的流媒体和悬念集成。

涡轮机组改进

Turbopack 是基于 Rust 的捆绑器，在 Next.js 15 中达到了稳定的开发。主要改进包括：

• 与 webpack 相比，冷启动速度加快 70%
• 即时快速刷新，具有持久缓存
• 改进了 CSS 和 SVG 处理，无需插件

显式启用它：

// next.config.ts
const nextConfig = {
  turbopack: true,
};

其他显着变化

从 Next.js 迁移 14

1. 更新包：npm install next@15 react@19 react-dom@19
2. 使 params 异步：将任何 params 用法更改为 await params
3. 更新cookies()/headers()：在每次调用之前添加await
4. 检查缓存：在需要缓存的地方添加 cache: 'force-cache'
5. 启用 Turbopack：在 next.config.ts 中设置 turbopack: true
6. 测试 React 编译器：实验性地启用 reactCompiler: true

结论

Next.js 15 通过 React 19 带来了期待已久的稳定性、可预测的缓存默认值和更清晰的异步请求 API。转向 Turbopack 作为默认开发捆绑器显着提高了迭代速度。虽然缓存默认更改可能需要添加显式选择加入，但总体结果是一个更加透明和高性能的框架。团队应该规划异步 API 迁移，但会受益于减少的配置开销和面向未来的 React 19 集成。