Next.js 15 重大更新解析

作为 React 框架的佼佼者，Next.js 的第 15 个版本带来了诸多激动人心的更新。这次更新重点优化了开发工作流程、性能表现，并加强了安全性。现在就来深入了解这些新特性。

自动化升级工具

Next.js 15 引入了全新的 codemod CLI 工具，大大简化了版本升级流程。只需要运行以下命令即可升级到最新版本：

npx @next/codemod@canary upgrade rc

该工具不仅能自动更新依赖，还会展示可用的代码转换选项，并指导完成整个升级过程。

Turbopack 开发模式的重大进展

Turbopack 作为开发环境的构建工具已经达到稳定状态，现在可以通过以下命令启用：

next dev --turbo

最新的优化成果令人印象深刻：

内存占用减少 25-35%
大型页面编译速度提升 30-50%

比如一个包含上千个模块的页面，编译时间从原来的 10 秒降到了 5-7 秒。目前团队正在开发持久化缓存等更多优化特性。

异步请求 API

为了适应未来的优化需求，与请求相关的 API（如 headers、cookies 等）已改为异步函数。示例代码：

import { cookies } from 'next/headers';

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

这一变更会影响layout.js、page.js 中的cookies、headers、draftMode 和params等 API。虽然这些 API 仍可通过警告同步访问，但建议升级。

可以使用以下命令进行代码迁移：

npx @next/codemod@canary next-async-request-api .

服务端操作安全升级

为了提高 Server Actions 的安全性，新版本引入了两个重要特性：

未使用的 Server Actions 代码会被删除，避免暴露给客户端
为每次构建生成不可预测的操作 ID，增加攻击难度

'use server';

export async function updateUserAction(formData) {}
export async function deleteUserAction(formData) {}

新增组件与功能

Form 组件

新的

组件在标准 HTML form 的基础上增加了预加载、客户端导航等功能：

import Form from 'next/form';

export default function SearchPage() {
  return (
    
      
      
    
  );
}

TypeScript 配置支持

现在可以使用 TypeScript 编写配置文件（next.config.ts）：

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  // 配置选项
};

export default nextConfig;

性能监控

通过 instrumentation.js 文件，可以方便地集成性能监控和错误追踪：

export async function onRequestError(err, request, context) {
  await fetch('https://监控服务', {
    method: 'POST',
    body: JSON.stringify({ message: err.message, request, context }),
    headers: { 'Content-Type': 'application/json' },
  });
}

构建优化

服务端组件热更新现在可以复用之前的 fetch 响应
静态生成速度显著提升
自托管应用程序获得了更多缓存控制选项
图片优化不再需要手动安装 sharp

ESLint 9 支持

Next.js 15 已支持 ESLint 9，并保持向后兼容。对于还未采用新配置格式的项目，框架会自动应用 ESLINT_USE_FLAT_CONFIG=false 来确保平稳过渡。

这些更新不仅提升了开发体验，也为未来的 JavaScript 和 Node.js 生态系统演进做好了准备。建议开发者及时查看升级指南，使用提供的迁移工具完成升级。