Next.js 15 新特性文档

Next.js 15 是一个重要的版本更新，引入了许多新特性和改进，旨在提升开发效率、性能和用户体验。以下是 Next.js 15 的主要新特性及其详细说明。

---

1. React 19 支持

Next.js 15 全面支持 React 19，包括其新特性如 Actions、React Compiler 等。

主要特性：

• React Compiler（实验性） ：自动优化代码，减少手动使用 useMemo 和 useCallback 的需求，提升性能并降低错误率。
• 新钩子 ：如 useActionState、useFormStatus、useOptimistic，简化状态管理和表单处理逻辑。
• 向后兼容性：支持 Pages Router 使用 React 18，同时 App Router 使用 React 19，确保平滑过渡。

---

2. 缓存策略改进

Next.js 15 对缓存机制进行了重大调整，默认行为更加灵活。

主要变化：

• Fetch 请求和 GET 路由处理程序默认不再缓存 ：开发者需显式配置缓存策略（如 cache: 'force-cache'）。
• 客户端路由缓存 ：Page 组件的默认缓存行为被取消，开发者可通过 staleTimes 配置自定义缓存时间。

代码示例：

javascript

复制

// next.config.js
const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 60, // 动态路由缓存 60 秒
      static: 300, // 静态路由缓存 300 秒
    },
  },
};

module.exports = nextConfig;

---

3. 异步请求 API

Next.js 15 将依赖请求特定数据的 API（如 cookies、headers、params、searchParams）改为异步，以减少渲染阻塞并提升性能。

代码示例：

javascript

复制

import { cookies } from 'next/headers';

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

---

4. Turbopack Dev 稳定版

Turbopack 是 Next.js 15 中的新一代打包工具，现已进入稳定阶段。

性能提升：

• 本地服务器启动速度提升 76.7% 。
• 代码更新速度提升 96.3% 。
• 初始路由编译速度提升 45.8% （无缓存时）。

---

5. 部分预渲染（PPR，实验性）

PPR 允许在同一页面中结合静态和动态渲染，优化性能和数据新鲜度。

适用场景：

• 静态内容可以立即加载，而动态内容通过流式传输逐步加载。

---

6. 新组件与 API

主要新增：

• <Form> 组件 ：扩展了 HTML <form> 元素，支持预取、客户端导航和渐进增强，减少手动配置。
• unstable_after API（实验性） ：允许在响应完成后执行次要任务（如日志记录、分析），而不阻塞主响应。
• forbidden 和 unauthorized API（实验性） ：支持更细粒度的认证错误处理。

---

7. 开发者体验改进

主要改进：

• 静态路由指示器：开发模式下显示静态路由，帮助优化性能。
• 错误调试增强：改进的 hydration 错误视图和源映射，提供更清晰的错误提示和修复建议。
• TypeScript 支持 ：支持 next.config.ts 文件，提供类型安全和自动补全。

---

8. 安全与自托管优化

主要改进：

• Server Actions 安全性增强：通过死代码消除和安全动作 ID，减少未使用的 Server Actions 暴露。
• 自托管改进 ：增强对 Cache-Control 指令的控制，优化图像处理（自动使用 sharp）。

---

9. 性能与构建优化

主要改进：

• 静态生成速度提升：减少慢速网络请求的影响，优化构建时间。
• ESLint 9 支持：提升代码质量和开发效率。

---

总结

Next.js 15 通过 React 19 支持、缓存策略优化、Turbopack 稳定化等特性，显著提升了开发效率和性能。无论是新项目还是现有项目升级，这些改进都值得尝试。更多详细信息可参考 Next.js 官方博客。

---

附录：代码示例汇总

Fetch 请求缓存配置

async function fetchCachedData() {
  const res = await fetch('https://api.example.com/data', {
    cache: 'force-cache', // 强制缓存
  });
  return res.json();
}

客户端路由缓存配置

// next.config.js
const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 60, // 动态路由缓存 60 秒
      static: 300, // 静态路由缓存 300 秒
    },
  },
};

module.exports = nextConfig;

异步请求 API

import { cookies } from 'next/headers';

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

---