Next.js 13 服务端组件向客户端组件传递函数的问题

1. 错误含义解释 #

Next.js中服务端组件渲染完成后，会将组件的序列化数据传递给客户端。而函数属于不可序列化类型——无法转换成JSON格式在服务端与客户端之间传输，所以直接把服务端组件里的handleSubmit函数传给客户端组件时，就会触发这个错误。

2. 能否向客户端组件传递函数？ #

不能直接传递不可序列化的函数，但可以通过以下替代方案实现类似逻辑：

• 使用Next.js 13+ App Router推荐的Server Actions
• 自建内部API路由，客户端组件通过fetch调用该路由

3. 实现CORS受限API的调用需求 #

结合你的场景，给出两种可行方案：

方案一：使用Server Actions（推荐） #

修改代码如下：

• 服务端组件（Home）：

import Form from './Form';

// 定义Server Action，添加'use server'指令标记为服务端执行逻辑
async function handleSubmit(formData) {
  // 此处调用外部API，因在服务端执行，不受CORS限制
  const response = await fetch('https://目标外部API地址', {
    method: 'POST',
    body: formData,
    // 根据API要求添加其他请求配置
  });
  const data = await response.json();
  // 处理API返回结果
}

export default function Home() {
  return <Form onSubmit={handleSubmit} />;
}

• 客户端组件（Form）：

'use client';

export default function Form({ onSubmit }) {
  const handleFormSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    // 调用Server Action
    await onSubmit(formData);
  };

  return <form onSubmit={handleFormSubmit}>...</form>;
}

Server Action会自动在服务端执行，完美避开CORS问题，无需额外编写API路由。

方案二：自建内部API路由 #

1. 在app/api/submit/route.js创建API路由：

export async function POST(request) {
  const formData = await request.formData();
  // 服务端调用外部API，无CORS限制
  const response = await fetch('https://目标外部API地址', {
    method: 'POST',
    body: formData,
    // 根据API要求添加其他请求配置
  });
  const data = await response.json();
  return Response.json(data);
}

2. 客户端组件（Form）直接调用该内部API：

'use client';

export default function Form() {
  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    await fetch('/api/submit', {
      method: 'POST',
      body: formData,
    });
    // 处理API返回结果
  };

  return <form onSubmit={handleSubmit}>...</form>;
}

这种方案下，服务端组件无需传递函数，客户端组件直接与内部API路由通信，再由路由转发请求到外部API。

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