Next.js 15 新特性全解析与快速上手

发布于 2025/08/29 08:45

•

更新于

•

约 4 分钟阅读

Next.js 15 作为 React 官方推荐的框架，再次走在了 Web 开发的前沿。这次更新的核心是对 React 19 的全面支持，将 React 的最新能力无缝融入到 Next.js 的开发体验中。同时，它也带来了一系列自己的改进和优化。

让我们深入探索 Next.js 15 的关键特性。

1. 完全支持 React 19

这是 Next.js 15 最重大的更新。你现在可以直接在你的组件中使用所有 React 19 的新特性，而无需任何额外配置。

Actions

React 19 将 Actions 提升为一等公民。你可以更方便地在 Server Components 中定义异步操作，并通过 useTransition 来处理待处理状态 (pending state)。

jsx

// app/actions.js
'use server'

export async function updateUsername(username) {
  // ... 模拟一个异步操作
  await new Promise(res => setTimeout(res, 1000));
  // ... 更新数据库
}

// app/page.js
import { useTransition } from 'react';
import { updateUsername } from './actions';

function UsernameField() {
  const [isPending, startTransition] = useTransition();

  return (
    <button 
      disabled={isPending}
      onClick={() => startTransition(() => updateUsername('NewUser'))}
    >
      {isPending ? 'Updating...' : 'Update Username'}
    </button>
  );
}

`useOptimistic`

useOptimistic Hook 让你可以在异步操作完成前，就“乐观地”更新 UI。这能给用户带来极速的反馈，让应用感觉响应更快。

jsx

import { useOptimistic } from 'react';

function ChangeName({ currentName, onUpdateName }) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);

  const submitAction = async formData => {
    const newName = formData.get("name");
    setOptimisticName(newName); // 立即更新UI
    await onUpdateName(newName); // 发送请求
  };

  return (
    <form action={submitAction}>
      <p>Your name is: {optimisticName}</p>
      <input type="text" name="name" />
      <button type="submit">Update</button>
    </form>
  );
}

2. 新的 `after()` API

在 Server Actions 中，有时你希望在一个操作成功完成后执行一些客户端逻辑，比如显示一个提示 (toast) 或者重置表单。新的 after() API 让这一切变得简单。

after() 保证了其内部的代码只会在服务端操作成功执行后，在客户端运行。

jsx

import { after } from 'next/server';

async function action(formData) {
  'use server';
  const result = await someDatabaseCall(formData);
 
  after(() => {
    // 这段代码只会在 someDatabaseCall 成功后在客户端运行
    toast.success('操作成功！');
  });
 
  return result;
}

3. 缓存机制的优化

Next.js 15 默认不再缓存 POST 请求的路由处理器。这是一个符合预期的行为变更，因为 POST 请求通常意味着数据变更，其结果不应该被缓存。

同时，fetch 请求、GET 路由处理器和客户端路由器的缓存行为保持不变，确保了应用的性能。

4. 如何快速上手

升级到 Next.js 15 非常简单。

对于新项目

直接使用最新的 create-next-app 命令即可。

bash

npx create-next-app@latest

对于现有项目

更新你的 next, react, 和 react-dom 依赖到最新版本。