【学习资料】Next.js 14 的 Server Actions：写更轻松的全栈代码！

Next.js 14 的 Server Actions：写更轻松的全栈代码！

前言

还记得在全栈开发中，前端和后端之间频繁“聊天”的痛苦吗？写 API 接口、管理数据流、调试网络请求……好像永远有做不完的事情。

别担心，从 Next.js 14 开始，Server Actions 给了我们一个更简单的方式来处理服务器逻辑，让你的代码看起来更像魔法！

本篇文章将用轻松易懂的方式带你入门 Server Actions，帮你轻松写出高效、优雅的全栈代码！

一、什么是 Server Actions？

简单来说，Server Actions 是 Next.js 提供的一种让你在 React 组件中直接调用服务器端逻辑的新方式。通过它：

• 你可以直接在前端调用后端逻辑，无需额外创建 API 路由。
• 数据处理和状态管理变得更加直观。
• 服务端代码只在服务端运行，不会暴露给客户端，安全性更高。

一句话总结：Server Actions = 更少的样板代码 + 更流畅的全栈开发体验。

二、准备工作：升级你的 Next.js 项目

1. 安装或升级到 Next.js 14

确保你的项目使用的是 Next.js 14 版本：

npm install next@latest react@latest react-dom@latest

三、Server Actions 快速入门

让我们从一个简单的例子开始，感受下 Server Actions 的魅力。

1. 创建一个 Server Action 函数

在组件文件中直接定义你的后端逻辑：

'use server'; // 声明这是一个服务器端操作

export async function saveDataToDB(data: { name: string }) {
  console.log('Saving to the database:', data.name);
  // 模拟保存数据到数据库
  return { success: true };
}

'use server' 指明这段代码只会在服务器上运行。

2. 在组件中调用 Server Action

前端直接调用这个函数：

import { saveDataToDB } from './actions';

export default function ServerActionDemo() {
  async function handleSubmit(formData: FormData) {
    const name = formData.get('name')?.toString() || '';
    const result = await saveDataToDB({ name }); // 调用 Server Action
    alert(result.success ? '保存成功！' : '保存失败！');
  }

  return (
    <form action={handleSubmit}>
      <input type="text" name="name" placeholder="输入名字" />
      <button type="submit">保存</button>
    </form>
  );
}

看！没有 fetch，没有 API 路由，后端逻辑就在组件中轻松调用！

四、进阶用法：搭配数据库与异步逻辑

1. 整合数据库

假设你正在使用 Prisma 操作数据库，可以直接在 Server Action 中调用：

'use server';
import { prisma } from '@/lib/prisma';

export async function createUser(data: { name: string }) {
  const newUser = await prisma.user.create({
    data: { name: data.name },
  });
  return newUser;
}

2. 处理复杂交互

Server Actions 支持接收 FormData、JSON 数据，甚至支持上传文件：

'use server';

export async function uploadFile(formData: FormData) {
  const file = formData.get('file') as File;
  console.log('Uploading file:', file.name);
  // 处理文件上传逻辑
  return { success: true };
}

前端调用方法依然简单：

<form action={uploadFile} encType="multipart/form-data">
  <input type="file" name="file" />
  <button type="submit">上传</button>
</form>

五、Server Actions 的最佳实践

1. 安全性优先：Server Actions 的代码只运行在服务端，不会泄露到客户端，但依然要避免直接处理敏感数据。
2. 与 API 共存：Server Actions 并不意味着完全取代 API，复杂场景下仍可以使用传统的 API 路由。
3. 按需加载：仅将 Server Actions 用于需要服务端能力的操作，避免过度依赖。
4. 优化性能：尽量精简 Server Actions 的逻辑，减少不必要的数据库查询和复杂计算。

六、总结

Next.js 14 的 Server Actions 为开发者提供了一个更直观、更流畅的全栈开发体验。从简单的数据保存到复杂的交互逻辑，它都可以轻松应对。

试想一下，不需要再写冗长的 API 路由，直接在组件中定义逻辑，是不是让你的全栈开发工作省心了许多？赶快升级你的项目，享受 Server Actions 的便捷吧！

如果你有更多关于 Next.js 的问题或想法，欢迎留言分享！✨