如何在Next.js中让类及方法作为Server Actions使用？

关于'use server'作用于整个文件 #

可以直接将'use server'放在文件最顶部（所有导入语句之前），这样整个文件内的所有导出内容（包括类、类方法、函数）都会被标记为Server Actions，自动在服务器端执行。

实现步骤与代码示例 #

结合你提供的代码，按以下方式改造即可：

1. 添加全局Server Actions标记：在文件开头加入'use server'指令
2. 实现类的异步交互方法：数据库操作是异步的，类的核心方法需要定义为async
3. 导出类实例供客户端调用：客户端无法在服务器外实例化此类（会涉及服务器端数据库逻辑），因此在文件内实例化后导出

改造后的代码：

'use server'; // 全局标记为Server Actions，必须放在最顶部

import { CollectionService } from "./collectionsService";

export interface ResumeType {
  id?: string;
  image_url: string;
  download: string;
  view: string;
  categories: string[];
}

class ResumeCollectionService extends CollectionService<ResumeType> {
  constructor() {
    super('resumes');
  }

  // 获取所有简历数据（示例方法，假设父类有对应的基础实现）
  async getAll(): Promise<ResumeType[]> {
    return await super.getAllDocuments();
  }

  // 创建新简历（示例方法）
  async create(resume: Omit<ResumeType, 'id'>): Promise<ResumeType> {
    const newResume = await super.createDocument(resume);
    return newResume;
  }

  // 根据ID删除简历（示例方法）
  async delete(id: string): Promise<void> {
    await super.deleteDocument(id);
  }
}

// 导出实例，客户端直接导入此实例调用方法
export const resumeService = new ResumeCollectionService();

客户端调用方式 #

在客户端组件中，你可以直接导入导出的实例，异步调用其方法：

'use client';

import { resumeService } from '@/services/resumeCollectionService';

async function fetchResumes() {
  const resumes = await resumeService.getAll();
  // 处理简历数据
}

async function handleCreateResume(newResumeData) {
  try {
    await resumeService.create(newResumeData);
    // 创建成功后的逻辑
  } catch (err) {
    // 错误处理
  }
}

注意事项 #

• 类的所有数据库交互方法必须是async，Server Actions本身要求异步执行
• 父类CollectionService中的基础方法（如getAllDocuments、createDocument）也需要是异步的，确保数据库操作在服务器端完成
• 不要在客户端组件中实例化ResumeCollectionService，必须使用文件内导出的实例，避免客户端暴露服务器端逻辑

内容的提问来源于stack exchange，提问作者Jesse L. Greenough