当前位置：首页 > news >正文

Next.js 15 重磅发布：React 19 集成 + 性能革命，开发者必看新特性指南

news 2025/8/8 16:47:10

🚀 概述

Next.js 15 引入了多个重要的新 API 和功能增强，主要包括 React 19 集成、新的 App Router 功能、性能优化以及开发体验改进。本文档重点介绍这些新 API 的使用方法和实际应用场景。

🆕 新 API 特性

React 19 集成

作用：全面集成 React 19 的新特性，包括 React Compiler、Actions 和新的 Hooks。

API 变更：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {// 启用 React 19 特性experimental: {// 启用 React CompilerreactCompiler: true,// 启用 ActionsserverActions: {bodySizeLimit: "2mb",},},
};module.exports = nextConfig;

使用场景：

需要自动性能优化的应用
使用 Actions 处理表单提交

新的 App Router 功能

新增功能：改进的 Server Actions，支持更强大的服务端操作，包括文件上传、流式响应等。

API 使用：

// app/actions.js
import { revalidatePath } from "next/cache";// 新的 Server Action 语法
export async function createPost(formData) {const title = formData.get("title");const content = formData.get("content");// 支持文件上传const image = formData.get("image");// 数据库操作const post = await db.post.create({data: { title, content, imageUrl: image?.name },});// 重新验证缓存revalidatePath("/posts");return { success: true, postId: post.id };
}// 在组件中使用
export default function CreatePost() {return (<form action={createPost}><input name="title" placeholder="标题" /><textarea name="content" placeholder="内容" /><input type="file" name="image" accept="image/*" /><button type="submit">创建文章</button></form>);
}

使用场景：

表单处理和数据提交，文件上传功能
需要服务端状态管理的应用

性能优化 API

新增功能：新的缓存策略，提供更细粒度的缓存控制，支持部分重新验证。

API 使用：

// app/lib/data.js
import { unstable_cache } from "next/cache";// 新的缓存 API
export const getUsers = unstable_cache(async () => {const users = await db.user.findMany();return users;},["users"],{revalidate: 3600, // 1小时tags: ["users"],}
);// 部分重新验证
export async function updateUser(userId, data) {await db.user.update({where: { id: userId },data,});// 只重新验证特定用户revalidateTag("users");
}

使用场景：

需要精确缓存控制的应用
大型数据集的性能优化

开发体验改进

新增功能：默认启用 Turbopack，提供更快的构建和开发体验。

API 使用：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {// 启用 Turbopackexperimental: {turbo: {// Turbopack 配置rules: {'*.svg': {loaders: ['@svgr/webpack'],as: '*.js',},},},},
}// package.json
{"scripts": {"dev": "next dev --turbo","build": "next build","start": "next start"}
}

使用场景：

需要快速热重载的应用
性能敏感的开发环境

新的中间件功能

新增功能：改进的中间件 API，更强大的中间件功能，支持更多场景。

API 使用：

// middleware.js
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";export function middleware(request: NextRequest) {// 新的请求处理const { pathname } = request.nextUrl;// 支持更多匹配模式if (pathname.startsWith("/api/")) {// API 路由处理return NextResponse.next();}// 新的响应处理if (pathname.startsWith("/admin/")) {const token = request.cookies.get("auth-token");if (!token) {return NextResponse.redirect(new URL("/login", request.url));}}// 新的头部设置const response = NextResponse.next();response.headers.set("x-custom-header", "value");return response;
}export const config = {matcher: [// 新的匹配器语法"/((?!api|_next/static|_next/image|favicon.ico).*)",],
};

使用场景：

身份验证
路由保护

新的构建优化

新增功能：新的打包优化，改进的代码分割和打包策略。

API 使用：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {// 新的打包配置experimental: {// 改进的代码分割optimizePackageImports: ["@mui/material", "lodash"],// 新的压缩选项compress: true,},// 新的输出配置output: "standalone",// 新的图片优化images: {formats: ["image/webp", "image/avif"],deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],},
};

使用场景：

包大小优化
加载性能提升

新的国际化功能

新增功能：改进的 i18n 支持，更好的国际化支持，包括动态语言切换。

API 使用：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {i18n: {locales: ["en", "zh", "ja"],defaultLocale: "en",// 新的语言检测localeDetection: true,},
};// app/[locale]/layout.js
export async function generateStaticParams() {return [{ locale: "en" }, { locale: "zh" }, { locale: "ja" }];
}// app/[locale]/page.js
import { useTranslations } from "next-intl";export default function Page() {const t = useTranslations("Index");return (<div><h1>{t("title")}</h1><p>{t("description")}</p></div>);
}

使用场景：

多语言应用
国际化网站

常见问题解决

问题 1：React 19 兼容性

// ❌ 可能出现的兼容性问题
// Error: React 19 features not enabled// ✅ 解决方案
// next.config.js
const nextConfig = {experimental: {reactCompiler: true,serverActions: true,},
};

问题 2：Turbopack 配置

// ❌ Turbopack 可能不兼容某些插件
import { somePlugin } from "some-package";// ✅ 使用条件配置
const nextConfig = {experimental: {turbo:process.env.NODE_ENV === "development"? {// Turbopack 配置}: undefined,},
};

问题 3：图片优化

// ❌ 旧的图片处理
<img src="/image.jpg" alt="图片" />;// ✅ 新的图片优化
import Image from "next/image";<Imagesrc="/image.jpg"alt="图片"width={500}height={300}placeholder="blur"blurDataURL="data:image/jpeg;base64,..."
/>;