Next.js Pages路由下如何使用Server Actions实现表单提交？

完全可以在Pages目录下用Server Actions提交表单，只是写法和App目录有差异。你遇到的报错是因为Pages目录不允许在组件内部直接定义带"use server"的函数，必须把Server Actions抽离到单独的文件中导出使用，具体操作如下：

1. 创建独立的Server Actions文件 #

在项目根目录新建一个actions文件夹，然后创建formActions.ts文件，把表单处理逻辑放在这里：

// actions/formActions.ts
"use server";

export async function handleSubmit(data: FormData) {
  console.log(data.get("name"));
  // 这里可以添加数据库操作、数据验证等服务器端逻辑
}

注意要在文件顶部添加"use server";指令，这样整个文件内的函数都会被标记为Server Actions。

2. 在Pages页面中导入并使用 #

修改你的pages/old/index.tsx代码，导入刚才定义的handleSubmit函数：

// pages/old/index.tsx
import { handleSubmit } from "../../actions/formActions";

const Page = () => {
  return (
    <form action={handleSubmit}>
      <input type="text" name="name" />
      <input type="number" name="age" />
      <button type="submit">submit</button>
    </form>
  );
};

export default Page;

为什么原来的代码在App目录能运行？ #

App目录的服务器组件允许在内部直接定义带"use server"的函数，但Pages目录的规则不同——Server Actions必须从单独的、标注了"use server"的文件中导入，不能内嵌在页面组件里。

额外注意事项 #

• 确保你的Next.js版本在13.4及以上，这是Server Actions进入稳定版的最低版本要求。
• 如果你的Pages页面是客户端组件（比如添加了'use client'指令），依然可以正常导入并使用Server Actions，客户端只会触发函数调用，实际逻辑会在服务器端执行。

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