NextJS中导出对象变为函数，调用getPosts报类型错误的原因

核心原因 #

Next.js 中使用 'use server' 声明的模块，仅支持导出独立的函数作为 Server Actions，不支持导出包含方法的对象。当你导出一个包含方法的对象时，Next.js 会自动将整个对象包装成一个单一的 Server Action 函数，而非保留原有的对象结构。这就导致客户端导入后，postService 变成了一个函数，而非你定义的对象，调用 postService.getPosts 自然会触发“getPosts不是函数”的错误。

正确的实现方式 #

方式1：直接导出独立的Server Action函数 #

修改服务端模块，直接导出 getPosts 函数：

// app/posts/actions.js
'use server';

export async function getPosts() {
  // 你的服务端逻辑
  return [...];
}

客户端组件中直接导入并调用：

// app/components/PostsClient.js
'use client';

import { getPosts } from '../posts/actions';

async function fetchPosts() {
  const posts = await getPosts();
  // 处理返回结果
}

方式2：封装服务端逻辑，导出多个独立函数 #

如果需要按“服务”的方式组织逻辑，可以在服务端模块里封装内部逻辑，再导出多个独立的Server Action函数：

// app/posts/postService.js
'use server';

// 内部封装的服务逻辑
class PostService {
  async getPosts() {
    return [...];
  }

  async createPost(data) {
    // 创建逻辑
  }
}

const postService = new PostService();

// 导出独立的Server Action函数
export const getPosts = () => postService.getPosts();
export const createPost = (data) => postService.createPost(data);

客户端组件导入对应的函数即可：

'use client';

import { getPosts, createPost } from '../posts/postService';

补充说明 #

Server Actions 的设计初衷是让客户端能直接调用服务端函数，Next.js 会自动处理函数的序列化、跨端调用等逻辑，但这种机制仅针对单个函数生效，无法保留对象的方法结构。所以必须遵循“导出独立函数”的规则。

内容的提问来源于stack exchange，提问作者Shury