点击Next.js按钮触发Connection closed错误的原因排查

你遇到的Connection closed错误核心原因是服务器动作的调用方式不符合Next.js规范：

1. 直接在服务器组件中定义带"use server"的回调，并绑定到按钮的onClick事件——onClick是客户端交互事件，服务器组件无法直接处理这类客户端逻辑，导致客户端与服务器通信机制异常。
2. 原代码中未用await执行deletePost(id)，异步操作未完成就提前结束，引发连接中断。
3. DeleteButton组件未标记为客户端组件，无法正确处理客户端点击事件与服务器动作的交互。

方案1：使用表单触发服务器动作（推荐，符合Next.js设计规范） #

直接用表单包裹按钮，通过formAction调用服务器动作，无需额外客户端组件：

import { auth } from "@/auth";
import Image from "next/image";
import deleteIcon from "@/app/static/icons8-delete.svg";
import { deletePost } from "@/app/lib/actions";

export default async function UserPostControls({ user, id }: { user: string, id: string }) {
    const sessionUser = await auth();

    if (sessionUser?.user?.name == user) {
        return (
            <form 
                action={async () => {
                    "use server";
                    console.debug("Deleting post");
                    // 必须await确保异步操作完成
                    await deletePost(id);
                }}
                className="inline"
            >
                <button 
                    type="submit" 
                    className="flex flex-row m-1 text-black hover:text-red-700 float-right"
                >
                    Delete Ad
                    <Image 
                        className="inline ml-1" 
                        src={deleteIcon} 
                        width={20} 
                        height={20} 
                        alt="Delete" 
                    />
                </button>
            </form>
        )
    }

    return <span></span>;
}

方案2：保留DeleteButton客户端组件，正确传递服务器动作 #

步骤1：修改DeleteButton为客户端组件 #

添加'use client'指令，处理客户端点击事件：

'use client';
import deleteIcon from "@/app/static/icons8-delete.svg"
import Image from "next/image";

export default function DeleteButton({ onDelete }: { onDelete: () => Promise<void> }) {
    return (
        <button 
            className="flex flex-row m-1 text-black hover:text-red-700 float-right"
            onClick={async () => {
                try {
                    await onDelete();
                } catch (error) {
                    console.error('删除操作失败:', error);
                }
            }}
        >
            Delete Ad
            <Image 
                className="inline ml-1" 
                src={deleteIcon} 
                width={20} 
                height={20} 
                alt="Delete" 
            />
        </button>
    );
}

步骤2：修改UserPostControls，正确定义并传递服务器动作 #

将服务器动作定义为顶层函数，确保"use server"在函数顶层：

import { auth } from "@/auth";
import DeleteButton from "@/app/ui/delete-button";
import { deletePost } from "@/app/lib/actions";

// 顶层定义服务器动作函数
async function handleDelete(id: string) {
    "use server";
    console.debug("Deleting post");
    await deletePost(id);
}

export default async function UserPostControls({ user, id }: { user: string, id: string }) {
    const sessionUser = await auth();

    if (sessionUser?.user?.name == user) {
        return (
            <span>
                <DeleteButton onDelete={() => handleDelete(id)} />
            </span>
        )
    }

    return <span></span>;
}

• 服务器动作函数必须保证"use server"在函数或文件的顶层，不能嵌套在组件内部的箭头函数中。
• 所有异步服务器操作必须用await，避免函数提前结束导致连接中断。
• 处理客户端交互（如点击事件）的组件必须标记为客户端组件（添加'use client'），服务器组件无法处理客户端逻辑。

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