编辑“︁Next.js服务器操作”︁

= Next.js服务器操作 =

== 介绍 ==
'''Next.js服务器操作（Server Actions）'''是Next.js框架中一项允许开发者直接在React组件内执行服务器端代码的功能。它消除了传统API路由的复杂性，使开发者能够更直观地处理表单提交、数据变更等操作。此功能特别适合需要与数据库交互或执行敏感操作（如身份验证）的场景。

服务器操作的核心优势包括：
* '''减少客户端代码'''：敏感逻辑保留在服务器端
* '''简化数据流'''：无需手动创建API端点
* '''自动类型安全'''：与TypeScript深度集成
* '''渐进增强'''：即使JavaScript被禁用也能工作

== 基本用法 ==

=== 启用服务器操作 ===
在Next.js配置文件中启用实验性功能：

<syntaxhighlight lang="javascript">
// next.config.js
module.exports = {
  experimental: {
    serverActions: true,
  },
}
</syntaxhighlight>

=== 创建基础服务器操作 ===
服务器操作可以是异步函数，使用<code>'use server'</code>指令标记：

<syntaxhighlight lang="javascript">
// app/actions.ts
'use server'

export async function createPost(title: string, content: string) {
  // 数据库操作示例
  const post = await db.post.create({
    data: { title, content }
  });
  return post.id;
}
</syntaxhighlight>

== 详细工作机制 ==

<mermaid>
sequenceDiagram
    participant Client as 客户端
    participant Server as 服务器
    Client->>Server: 提交表单数据
    Server->>Database: 执行服务器操作
    Database-->>Server: 返回操作结果
    Server-->>Client: 返回响应/重定向
</mermaid>

关键流程说明：
1. 客户端触发操作（如表单提交）
2. Next.js运行时将请求路由到服务器
3. 服务器执行标记的函数
4. 结果通过RSC（React Server Components）协议返回

== 进阶用法 ==

=== 表单集成 ===
直接绑定服务器操作到表单：

<syntaxhighlight lang="javascript">
// app/page.tsx
import { createPost } from './actions';

export default function Page() {
  return (
    <form action={createPost}>
      <input name="title" />
      <textarea name="content" />
      <button type="submit">提交</button>
    </form>
  );
}
</syntaxhighlight>

=== 优化用户体验 ===
使用<code>useTransition</code>实现加载状态：

<syntaxhighlight lang="javascript">
'use client'
import { useTransition } from 'react';
import { createPost } from './actions';

export function PostForm() {
  const [isPending, startTransition] = useTransition();
  
  const handleSubmit = (e) => {
    e.preventDefault();
    startTransition(() => {
      createPost(new FormData(e.target));
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 表单字段 */}
      <button disabled={isPending}>
        {isPending ? '提交中...' : '提交'}
      </button>
    </form>
  );
}
</syntaxhighlight>

== 安全注意事项 ==

服务器操作需要特别注意：
* '''输入验证'''：始终验证客户端传入的数据
* '''错误处理'''：使用try-catch块捕获异常
* '''权限检查'''：验证用户会话
* '''CSRF保护'''：Next.js自动提供保护

安全示例：
<syntaxhighlight lang="javascript">
'use server'
import { auth } from '@/auth';

export async function deletePost(postId: string) {
  const session = await auth();
  if (!session) throw new Error('未授权');
  
  try {
    await db.post.delete({ where: { id: postId } });
  } catch (error) {
    console.error(error);
    throw new Error('删除失败');
  }
}
</syntaxhighlight>

== 性能优化 ==

考虑以下优化策略：
* '''批量操作'''：合并多个更新
* '''缓存失效'''：使用<code>revalidatePath</code>
* '''并行请求'''：Promise.all处理独立操作

优化示例：
<syntaxhighlight lang="javascript">
'use server'
import { revalidatePath } from 'next/cache';

export async function updatePost(data: FormData) {
  await db.post.update({
    where: { id: data.get('id') },
    data: { title: data.get('title') }
  });
  revalidatePath('/posts'); // 更新缓存
}
</syntaxhighlight>

== 实际案例：博客系统 ==

完整场景实现博客文章的创建流程：

1. '''定义操作'''：
<syntaxhighlight lang="javascript">
// app/actions.ts
'use server'
import { redirect } from 'next/navigation';

export async function createArticle(data: FormData) {
  const title = data.get('title')?.toString();
  const content = data.get('content')?.toString();
  
  if (!title || !content) {
    return { error: '缺少必要字段' };
  }

  const article = await db.article.create({
    data: { title, content, userId: (await auth()).user.id }
  });
  
  redirect(`/articles/${article.id}`);
}
</syntaxhighlight>

2. '''创建表单组件'''：
<syntaxhighlight lang="javascript">
// app/components/ArticleForm.tsx
'use client'
import { createArticle } from '@/actions';

export function ArticleForm() {
  return (
    <form 
      action={createArticle}
      className="space-y-4"
    >
      <input 
        name="title" 
        required 
        className="w-full p-2 border"
      />
      <textarea 
        name="content" 
        required
        className="w-full p-2 border"
      />
      <button 
        type="submit"
        className="px-4 py-2 bg-blue-500 text-white"
      >
        发布文章
      </button>
    </form>
  );
}
</syntaxhighlight>

== 常见问题 ==

=== 1. 如何处理文件上传？ ===
使用FormData处理文件：

<syntaxhighlight lang="javascript">
'use server'
export async function uploadImage(data: FormData) {
  const file = data.get('file') as File;
  const bytes = await file.arrayBuffer();
  // 处理文件内容...
}
</syntaxhighlight>

=== 2. 能否在客户端调用？ ===
可以，但需要通过API路由封装：

<syntaxhighlight lang="javascript">
// app/api/run-action/route.ts
import { someAction } from '@/actions';

export async function POST(req: Request) {
  const data = await req.json();
  return Response.json(await someAction(data));
}
</syntaxhighlight>

== 数学表达 ==

服务器操作的延迟可以表示为：

<math>
T_{total} = T_{network} + T_{execution} + T_{serialization}
</math>

其中：
* <math>T_{network}</math> = 网络传输时间
* <math>T_{execution}</math> = 服务器执行时间
* <math>T_{serialization}</math> = 数据序列化/反序列化时间

== 总结 ==

Next.js服务器操作通过以下方式简化全栈开发：
* 将服务器逻辑与UI组件紧密集成
* 自动处理数据序列化和网络通信
* 提供类型安全的开发体验
* 支持渐进增强模式

最佳实践建议：
* 为复杂操作创建单独的<code>actions.ts</code>文件
* 始终添加输入验证和错误处理
* 合理使用缓存策略
* 在敏感操作前验证用户权限

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js数据获取]]