Next.js按钮onClick事件报错求助：事件处理器无法传递给客户端组件

核心原因 #

Next.js 13+的App Router中，默认生成的page.js是Server Component，这类组件不支持添加交互事件处理（比如onClick），必须将组件标记为Client Component才能使用交互逻辑。同时你的代码还存在一处语法错误。

正确代码示例 #

'use client'; // 必须添加这行，标记为客户端组件

export default function Home() {
    // 修正箭头函数语法错误：const 变量 = () => { ... }
    const handleClick = () => {
        console.log('clicked');
    };

    return (
        <div>
            <button onClick={handleClick}>Click me</button>
        </div>
    );
}

关键修改点说明 #

1. 添加'use client'指令：这行代码必须放在组件文件的最顶部（任何导入之前），告诉Next.js该组件需要在客户端运行，支持交互事件、状态管理等客户端特性。
2. 修正handleClick的语法错误：你原本的写法const handleClick() => { ... }不符合JavaScript箭头函数语法，正确写法是const handleClick = () => { ... }。
3. 正确绑定onClick事件：直接将handleClick函数传给onClick即可，无需额外包裹未调用的箭头函数。

你之前的修改为什么无效 #

• 第一种修改：onClick={() => handleClick只是返回了函数本身，没有调用，且未解决Server Component不能用交互事件的核心问题。
• 第二种修改：onClick={(handleClick}存在括号不匹配的语法错误，同样没有将组件转为Client Component，所以报错依旧。

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